Redux란? 리덕스는 상태의 중앙관리를 위한 상태관리 도구입니다 전역상태를 생성하고 관리하기위한 라이브러리 Redux 왜 사용하나요? 리액트의 경우 단방향이라서 상태를 prpos로 전달받게 됩니다. 부모컴포넌트에서 최하위 자식 컴포넌트 전달한다고 했을때 두세개의 경우 가볍게 할 수 있지만 그 양이 일억개라고 생각해봅니다. 쉽게 말하자면 유선이라고 생각하면 됩니다. 리덕스의 경우 무선처럼 사용 할 수 있습니다 리덕스는 많아진 상태구성요소들을 보다 효율적으로 관리해줍니다 스토어를 사용하여 상태를 컴포넌트 구조 바깥에 두고 스토어를 통해 업데이트하거나 새로운 상태를 전달받아요 리덕스데브툴 사용시 시간여행 가능 그렇다면 리덕스 이전엔 어떻게 사용했나요? Context API등을 사용 전역상태관리측면에서는 차이..
LifeCycle Method
생명주기 메서드 클래스형 컴포넌트에서만 사용가능 마운트 마운트될 때 발생하는 생명주기 constructor getDerivedStateFromProps render componentDidMount constructor constructor()는 컴포넌트의 생성자 메서드 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 생성자로 props를 전달받아 state를 초기화 해야 할 때 사용하는 메서드 state를 초기화하지않는다면 구현하지않아도 됨 반드시 첫줄에 super(props);를 호출해야하며 그렇지 않은 경우 오류 발생 constructor() 내부에서는 setState()메서드를 지원하지않음 constructor(props) { super(props); console.log("constructor")..
- HTTP란 무엇인가 HTTP란 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다. HTTPS는 HTTP에 데이터암호화가 추가된 프로토콜이다. - GET과 POST의 차이는? GET은 주로 데이터를 읽거나 검색할때 사용되는 메서드이고 POST는 업데이트나 생성할 때 사용됨 GET은 데이터 변형위험이 없기때문에 POST보다 안전하다고 간주됨 POST요청은 클라이언트에서 서버로 전송할때 추가적인 데이터를 body에 포함할 수 있지만 GET요청은 필요한 데이터를 URL에 포함하여 요청함 - 브라우저 렌더링과정 1. HTML과 CSS를 파싱해 DOM과 CSSOM을 생성 2. 두 트리를 결합하여 렌더트리를 만듦 3. 렌더트리에서 각 노드의 위치와 크기를 계산하는 레이아웃 단계 거침 4. 계산이 완..
[[Prototype]] 프로토타입 자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖는다 이 숨김 프로퍼티 값은 null이거나 다른 객체에 참조가되는데 여기서 다른객체를 참조하는 경우 참조 대상을 프로토타입이라고 부른다 프로토타입은 프로퍼티를 읽을때만 사용한다 모든 객체는 자신의 부모역할을 하는 프로토타입객체의 참조 링크를 가지고 있다 링크를 통해 프로토타입으로부터 프로퍼티나 메서드를 상속받을 수 있다 ! 프로토타입 체인 상위 프로토타입과 연쇄적으로 연결된 구조 프로토타입 체이닝 프로퍼티나 메서드에 접근하기 위해 이 연결구조를 따라 차례대로 검색하는 것 제약사항 1. 순환참조(circular reference) 허용 안됨 프로토타입 이용해 닫힌형태로 다른 객체 참조시 에러발생 2...
함수선언문 함수이름(식별자), 매개변수,몸체로 구성 함수 이름이 반드시 정의 호이스팅으로 함수가 선언된 위치에서 코드를 최상단으로 끌어올려짐 function hello (a,b){ return a*b; } 함수표현식 함수의 이름이 선택사항 익명함수 함수를 할당한 변수를 사용하여 호출 const hello = function(a,b) { retuen a*b; } //hello는 함수가 아니라 변수 ! 기명함수 기명함수 표현식에서 사용된 함수이름은 외부에서 접근 불가 외부에서 함수표현식 호출시 반드시 함수를 할당한 변수 사용 할 것 ! const hello = function hi (a,b) { return a*b } console.log(hello(1,2)); //2 console.log(hi(1,2));..
기초부터 완성까지 프런트엔드 훑는중 이해되지않는 것 따로 정리 프로퍼티 getter와 setter 언제 사용하나요? 어떤 프로퍼티에 접근할때 동적인 계산이 필요하거나 프로퍼티 값이 변경될때마다 별도의 처리 코드가 필요하다면? getter,setter 접근자 프로퍼티를 사용해 일반프로퍼티처럼 사용가능 접근자 프로퍼티의 값에 접근하면 getter메서드가 호출 되며 이 메서드의 반환값이 접근표현식의 결괏값 접근자 프로퍼티의 값을 변경하려고 하면 settet 메서드 호출 접근자 프로퍼티란 ? 접근자 프로퍼티 (accessor property)라 불리는 새로운 종류의 프로퍼티 접근자 프로퍼티의 본질은 함수. 이 함수는 값을 획득하고(get)하고 설정(set)하는 역할을 담당 getter와 setter 메서드로 표..
컴포넌트 react 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있다 ! 리액트 컴포넌트는 react.component react.purecomponent로 나누어 정의 함 ! React.component ES6 class를 사용해 리액트 컴포넌트를 정의할 때에 기초가 되는 class React.PureComponent react.component와 비슷 react.component는 shouldComponentupdate()를 구현하지않지만 react.purecomponent는 props와 state를 이용한 얕게 비교를 구현한다는 차이점만이 존재 shouldComponentupdate() 현재 state또는 props의 변화가 컴포넌트의 출력결..
클래스형 class Hello extends Reacr.Component { render() { return hello {this.props.name}; } } //rcc 단축키 React.Component 클래스를 상속 데이터는 this.state에 render() 함수에 HTML과 같은 JSX문법을 이용해서 데이터 UI로 표기 함수형 function Hello () { return hello, {props.name}; } //rsi 단축키