리액트 생명주기 (22.11.13 TIL)

모든 리액트 컴포넌트에는 생명주기가 존재한다. 

• 생성 (mounting) -> 업데이트 (updating) -> 제거 (unmounting)

생명주기의 때에 따라 어떤 작업을 처리해야 하는 지 지정해줘야 불필요한 업데이트를 방지할 수 있다. 리액트의 class 컴포넌트는 라이프 사이클 메서드를 활용하고, 함수형 컴포넌트는 hook 을 사용한다.

• 마운트 (생성) : 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다.
• 업데이트 : props나 state가 변경되면 렌더가 진행되며 순서대로 호출된다
• 언마운트 (마운트 해제) : 컴포넌트를 DOM에서 제거하는 과정이다.

React Hook

리액트의 Hook 은 함수형 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고, class 없이 React를 사용할 수 있게 해준다.

리액트 생명주기와 관련한 훅 중에 useEffect 라는 것이 있다. useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업 (effect) 을 실행할 수 있게 해주는 훅이다. 즉, 컴포넌트가 마운드, 업데이트, 언마운트 되었을 때의 작업을 처리할 수 있다.

useEffect는 아래의 네 가지 형태로 호출할 수 있다.

//방법 1
useEffect(callBackFunc);

//방법 2
useEffect(callBackFunc, []);

//방법 3
useEffect(callBackFunc, [state1, state2]);

//방법 4
useEffect(()=>{ return(() => func()) });

• 방법 1 : 렌더링이 될 때마다 (컴포넌트가 마운트 된 후, 업데이트 되고난 후, 언마운트 되기 전) 실행이 된다. 생명주기 메서드를 모두 사용한 것과 마찬가지이다.
• 방법 2 : 최초 렌더링 되었을 때만 실행된다.
• 방법 3 : 최초 렌더링 + state1, state2 가 변경되었을 때 실행된다.
• 방법 4 : useEffect는 clean-up이라고 표현하는 함수를 return할 수 있는데, clean-up함수(리턴하는 함수)를 활용해 컴포넌트가 Unmount될 때 정리하거나 unscribe 해야할 것을 처리한다.

useEffect(()=>{
	console.log("로그로그");     
    return(() => exampleAPI.unsubscribe());
})

위의 경우 컴포넌트가 렌더링될 때마다 console.log("로그로그")를 수행하고, 컴포넌트가 unmount될 때 console.log("로그로그") 와 exampleAPI.unsubscribe()를 수행한다.

❗️useEffect로 전달된 함수는 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행 순으로 실행이 된다. 즉, useEffect실행이 최초 렌더링 이후 에 된다는 것을 유의하자.