리액트 라이프사이클

스탁벅스·2023년 3월 22일
2

리액트

목록 보기
5/6
post-thumbnail

0. 리액트 라이프사이클이란?

리액트 컴포넌트에는 라이프사이클(생명주기)이 존재한다. 라이프사이클은 컴포넌트가 처음 생성되는 단계인 Mount, 컴포넌트 내부가 업데이트되는 상태인 Update, 컴포넌트가 사라지는 단계인 Unmount로 구분된다.

1. 클래스형 컴포넌트에서의 라이프사이클

(출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

1) Mount

  • 먼저 컴포넌트가 처음생성될 때, constructor 메소드에 실행할 코드를 작성한다.
  • getDerivedStateFromProps는 props를 통해 state값을 얻는다.( props에 state가 의존하는 아주 드문 사용례를 위하여 존재)
  • 그 후, render 메소드를 통해 컴포넌트가 렌더 되고, 컴포넌트가 DOM에 추가된다.
  • 마지막으로 componentDidMount 메소드를 통해, 컴포넌트가 생성된 직후에 실행할 코드를 작성할 수 있다.

2) Update

  • 업데이트는 세가지 경우(New props, setState, forceUpdate)를 통해 실행된다
  • shouldComponentUpdate 메소드에서 true를 반환하면 업데이트를 진행하고, false가 반환되면 업데이트를 중단한다. 성능 최적화를 위해 존재한다.
  • 전 단계에서 업데이트가 계속 진행된다면 render 메소드를 통해 컴포넌트가 다시 렌더 된다.
  • 렌더링된 결과가 DOM 등에 반영되기 전에 getSnapshotBeforeUpdate가 호출되는데, 이 메소드를 사용하면 컴포넌트가 DOM으로부터 스크롤 위치 등과 같은 정보를 이후 변경되기 전에 얻을 수 있다.
  • 렌더 결과가 DOM에 반영된다.
  • componentDidUpdate를 통해 업데이트가 끝난 직후 실행시킬 코드를 작성할 수 있다.

3) Unmount

  • componentWillUnmount는 컴포넌트가 제거되기 직전에(제거 이후 x) 실행시킬 코드를 작성 할 수 있다.

2. 함수형 컴포넌트에서의 라이프사이클

(출처: https://wavez.github.io/react-hooks-lifecycle/)

리액트 16.8 버전부터 hooks가 생긴 이후로, 함수형 컴포넌트에서 useEffect hooks를 사용하여, 클래스형 컴포넌트에 존재하던 여러가지 생명주기 메소드들을 사용할 수 있다.

(출처: https://ko.reactjs.org/docs/hooks-effect.html)

리액트 공식문서에도 팁으로 나와있듯이, useEffect를 사용하여 componentDidMount, componentDidUpdate, componentWillUnmount를 대체하여 사용할 수 있다.

1) componentDidMount + componentDidUpdate 대체

  useEffect(() => {
    console.log("최초렌더 & 리렌더");
  });

위 코드와 같이 useEffect 괄호 안에 선언된 함수가 실행된다. 컴포넌트가 렌더되고, DOM에 반영 된 후에 실행되는 함수를 작성할 수 있다.

2) componentDidMount 대체

   useEffect(() => {
    console.log("최초렌더");
  }, []);

위 코드에서 처럼 useEffect 괄호안에 쉼표 뒤에 빈배열을 넣으면 컴포넌트가 최초로 렌더됐을 때(mount 됐을 때) 실행 되는 함수를 작성할 수 있다.

3) componentDidMount + componentDidUpdate 대체

 useEffect(() => {
   console.log("최초렌더 & num 변화");
 }, [num]);

num이라는 이름의 state 또는 props가 있다고 하자. 쉼표 뒤에 있는 배열에 num을 추가하면 컴포넌트가 mount되거나, num의 값이 업데이트 될 때 마다 실행시킬 함수를 작성 할 수 있다.

4) componentWillUnmount 대체

  useEffect(() => {
   return () => console.log(`언마운트`);
 }, []);

2)에서와 같은 방식으로 useEffect괄호 내부를 작성하는데, 여기서는 함수내부에서 return을 활용하여 unmount 됐을 때 실행시킬 함수를 작성하면 된다.

3. 예제 코드

1) App.tsx

function App() {
 const [num, setNumber] = useState(0);
 const [showChild, setShowChild] = useState(true);

 const handleUpClick = () => setNumber((prev) => prev + 1);
 const handleToggleClick = () => setShowChild((prev) => !prev);

 return (
   <>
     <div>
       <h2>LifeCycle</h2>
       <button onClick={handleToggleClick}>Toggle</button>
       {showChild ? (
         <>
           <Children num={num} />
           <button onClick={handleUpClick}>UP</button>
         </>
       ) : null}
     </div>
   </>
 );
}
export default App;

2) Children.tsx

function Children({ num }: { num: number }) {
 const ref = useRef(num);


 useEffect(() => {
   console.log("최초렌더 & 리렌더");
 });

 useEffect(() => {
   console.log("최초렌더");
 }, []);

 useEffect(() => {
   console.log("최초렌더 & 숫자 변화");
 }, [num]);

 useEffect(() => {
   return () => console.log(`언마운트`);
 }, []);

 return (
   <>
     {console.log("리턴")}
     <div>
       <h4>{num}</h4>
     </div>
   </>
 );
}
export default Children;

4. 실행 결과

1) 첫 실행 시

2) UP 클릭 시

3) Toggle 클릭 시

profile
환영합니다. 스탁벅스입니다.

0개의 댓글