리액트 생명주기(life cycle)
컴포넌트 생명주기
컴포넌트를 생성할 때 최초 한번만 실행하고 싶은 코드, 서버에서 데이터를 받아오면 업데이트하고 싶은 코드 등 특정 시점에 코드를 실행할 필요가 있습니다. 리액트는 컴포넌트에서 생명주기 메소드를 활용해 특정 시점에 코드를 실행할 수 있도록 지원하고 있습니다.
클래스형 컴포넌트를 기준으로 생명주기 메소드를 살펴보고, 함수형 컴포넌트에서는 어떻게 대응해서 활용하면 될지 살펴보겠습니다.
클래스형 컴포넌트 생명주기
생성할 때
- constructor : 컴포넌트의 생성자 메소드로, 가장 먼저 실행하는 메소드입니다.
- getDerivedStateFromProps : props 로 받아온 것을 state 에 설정하고 싶을 때 사용합니다.
- render : 컴포넌트를 렌더링하는 메소드입니다.
- componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출하는 메소드입니다.
업데이트 - getDerivedStateFromProps : 컴포넌트의 props 나 state 가 바뀌었을 때도 해당 메소드를 호출합니다.
- shouldComponentUpdate : 컴포넌트의 리렌더링 여부를 결정하는 메소드입니다.
- render : 업데이트한 내용을 렌더링합니다.
- getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전의 DOM에 있는 정보를 가져오고, 해당 메소드에서 반환하는 값은 componentDidUpdate 에 인자로 전달됩니다.
- componentDidUpdate : 리렌더링을 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출하는 메소드입니다. 세번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회할 수 있습니다.
제거할 때 - componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출합니다. setTimeout , setInterval 등을 사용한 것이 있다면 해당 메소드에서 clearTimeout , clearInterval 등으로 제거할 때 사용합니다.
함수형 컴포넌트에서 생명주기
컴포넌트 생성 속도, 가독성, hook의 활용 등의 이점으로 클래스형 컴포넌트 보다는 함수형 컴포넌트를 주로 사용하고 있습니다. 함수형 컴포넌트에는 클래스형 컴포넌트 처럼 지원하는 생명주기 메소드가 없습니다. 대신 hook으로 어떻게 대체해서 사용할 수 있는지 살펴봅시다.
- constructor : useRef 또는 useState 를 활용해 생성할 때 한 번만 동작하는 hook을 만들어 사용할 수 있습니다.
const useConstructor = (callback) => {
const hasBeenCalled = useRef(false);
if (hasBeenCalled.current) return;
callback();
hasBeenCalled.current = true;
}- getDerivedStateFromProps : useState(initialState) 에 초기 상태 값으로 props 를 설정해서 사용합니다.
- render : 함수형 컴포넌트에서 retrun 에 대응합니다.
- componentDidMount : useEffect 를 사용합니다.
useEffect(() => {
// componentDidMount 원하는 실행
}, []);- shouldComponentUpdate : React.memo 를 사용합니다. (참고)
- getSnapshotBeforeUpdate, componentDidUpdate : 변화 감지를 원하는 props, state 를 useEffect deps로 설정하여 사용합니다.
- componentWillUnmount : useEffect 에 callback을 return 해서 사용합니다.
useEffect(() => {
// componentDidUpdate 원하는 실행
return () => {
// componentWillUnmount 원하는 실행
}
}, [deps]);
안녕하세요 강나리입니다.