React Lifecycle #2 (Update와 Unmount에 대해)
·
Programming/React
업데이트(갱신, Update) 이벤트 컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다. 컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다. new Props / setState() / forceUpdate() getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate New Props 상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다. 이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다. setState 컴포넌트들은 공통적으로 setState() api를 제공한다. 현재 자신이 ..
React Lifecycle #1 (lifecylce설명과 Mount)
·
Programming/React
서론 React는 라이프사이클(생명주기, Lifecycle) 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 이러한 라이프사이클을 이용하여 우리는 React를 사용해, UI를 화면에 보이게 하고, UI를 업데이트 또는 교체하며, UI를 화면에서 제거할 수 있다. React 라이프사이클 이벤트 라이프사이클 이벤트를 분류해보면 다음과 같다. 마운트(생성, Mounte) 이벤트: React 엘리먼트를 DOM 노드에 추가할 때 발생한다. 업데이트(갱신, Update) 이벤트: 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생한다. 언마운트 (제거, Unmount) 이벤트: React 엘리먼트를 DOM에서 제거할 때 생긴다. 마운트(생성, Mounte) 이벤트 컴포넌트 함수가..