라이프 사이클
리액트 각각의 컴포넌트는 컴포넌트의 수명주기, 라이프 사이클이 존재한다.
컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이 난다.
라이프 사이클의 유형은 크게 세가지 생성, 수정, 삭제로 이루어져 있는데
각각 Mount , Update , Unmount 라고 한다.
Mount
Mount는 돔이 생성되고 웹 브라우저 상에 나타나는 것을 말한다.
Update
Update는 다음 네가지 상황에서 일어난다.
Props가 바뀔 때
state가 바뀔 때
부모 컴포넌트가 리렌더링 될 때
this.forceUpdate로 강제로 렌더링을 할 때이다.
Unmount
Unmount는 DOM에서 제거되는 것을 뜻한다.
컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메소드인 componentWillUnmount 만 호출하고 종료된다.
리액트 사이클 메서드
Constroct
컴포넌트를 만들 때 처음으로 실행되는 생성자이다.
초기 state 를 정의할 수 있습니다.
render()
가장 기본적이고 중요한 메서드, 라이프 사이클 메서드 중 유일하게 필수인 메서드
컴포넌트를 렌더링할 때 사용한다.
componentDidMount
컴포넌트가 DOM에 추가 된 후 실행된다. (렌더링을 마친 후 실행)
즉 이 메서드가 호출되는 시점에 우리가 만든 컴포넌트가 화면에 나타난 상태이다.
DOM과 상호작용하거나 서드파티 라이브러리들을 사용하는 코드들을 여기서 작성한다.
ComponentDidUpdate
리렌더링을 완료하고 화면에 원하는 변화가 반영되고 난 뒤에 호출되는 메서드이다.
Update가 끝난 직후이기 때문에, DOM 관련 처리를 해도 된다.
컴포넌트가 업데이트 되었을 때 DOM을 조작할 때 활용할 수 있다.
componentWillUnmount
DOM에서 컴포넌트가 지워질때 실행된다.
컴포넌트가 화면에서 사라지는 것을 의미하며 CoponentDIdMount에서 등록한 이벤트가 있다면 여기서 제거 해야한다.
함수형 컴포넌트
function 으로 정의하고 return 문에 jsx 코드를 반환합니다.
function이 아닌 화살표 함수로도 표현이 가능합니다.
클래스형 컴포넌트
class로 정의하고 render() 함수에서 jsx 코드를 반환합니다.
클래스형 컴포넌트에서는 state를 사용할 수 있으며 각종 라이프사이클 및 메서드를 이용하여 컴포넌트가 마운트 혹은 언마운트 될 때 추가 작업을 수행시키는 등 조작을 할 수 있었습니다.
