일기
리액트 왠만한 개념이 많이 이해가됬다.
리액트는 반영이빨라서 어떻게 변하는지 금방 볼 수 있어서 좋다.
드디어 어려웠던 생명주기가 이해가 됬다!
역시 직접 값을 바꿔보면서 개발자콘솔을 돌려보니 이렇게 되는거였구나!
왜 너무 어렵게 생각했을까? 하는 생각이 들었다.
물론 지금도 해야될게 많지만..ㅋㅋ
오늘의 공부목록
요약
컴포넌트는 생성 => 업데이트 => 제거 의 생명 주기를 갖고 있다.
생성)
컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다.
-
constructor()
-
render()
-
componentDidMount()
업데이트)
props나 state가 변경되면 render가 진행되며 순서대로 호출된다.
-
render()
-
componentDidUpdate()
제거)
컴포넌트가 DOM에서 제거될 때 호출된다.
- componentWillUnmount()
<용어정의>
constructor(props)
1 . 메소드를 바인딩하거나 state를 초기화하는 작업이 없다면 constructor(생성자)가 없어도 된다.
2 . react 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다.
3 . 생성자를 구현하면, this.props가 생성자 내에서 정의되도록 super(props)를 호출해야 한다.
4 . state의 값을 변경하고자 한다면, constructor() 외부에서 this.setState()를 통해 수정해야 한다.
render()
1 . 클래스 컴포넌트에서 반드시 구현되어야 하는 유일한 메소드로 이 메소드가 호출되면, this.props와 this.state의 값을 활용하여 값을 반환한다.
2 . render() 함수는 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환하며 브라우저와 직접적인 상호작용을 하지 않는다.
componentDidMount()
1 . 컴포넌트가 마운트 된 직후에 호출된다.
2 . DOM 노드가 있어야 하는 초기화 작업이 이루어지면 좋다.
3 . 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 좋은 위치이다.
componentDidUpdate()
갱신(렌더)가 일어난 직후 호출되며, 최초 렌더링에서는 호출되지 않는다.
componentWillUnmount()
1 . 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되며 타이머 제거, 네트워크 요청 취소, componentDidMount()에서 생성된 작업 등을 정리할 때 사용된다.
2 . 실행 직후, 컴포넌트는 렌더링 되지 않으므로, setState()를 호출하면 안된다.
