[React] 라이프사이클

라이프사이클 (= 생애 주기)

Mount ➡️ Update ➡️ UnMount

 

Mount 

• 컴포넌트가 탄생하는 순간               "A 컴포넌트가 Mount되었다."
• 화면에 처음 렌더링 되는 순간          => A 컴포넌트가 화면에 처음으로 렌더링 되었다. 

 "A 컴포넌트가 Mount되었다." => A 컴포넌트가 화면에 처음으로 렌더링 되었다. 

 

⬇️

 

Update 

• 컴포넌트가 다시 렌더링 되는 순간 (변화)
• 리렌더링 될 때를 의미

"A 컴포넌트가 Update되었다." => A 컴포넌트가 리렌더링되었다.

 

⬇️

 

UnMount

• 컴포넌트가 화면에 사라지는 순간 (죽음)
• 렌더링에서 제외되는 순간을 의미

"A 컴포넌트가 UnMount 되었다." => A 컴포넌트가 화면에서 사라졌다.

 

라이프 스타일 제어 (=> useEffect)

---

useEffect

리액트 컴포넌트의 side effect를 제어하는 새로운 React Hook

 

side effect? 부작용을 의미

(리액트스럽게 말을 바꾸면) "부수적인 효과", "파생되는 효과" 정도로 해석 

ex) 과식을 하면 살이 찐다. (살이 찐다 → side effect)

=> 컴포넌트의 동작에 따라 파생되는 여러 효과

 

React Component의 side effect

동작 ----------------------------------------------------------------→ 사이트 이펙트

컴포넌트 내부의 값 변경 ---------------------------------------→ 큰솔에 변경된 값 출력

컴포넌트 마운트 -------------------------------------------------→ 큰솔에 "Mount"라고 추력

컴포넌트 업데이트(리랜더) ------------------------------------→ 큰솔에 "Update"라고 추력

컴포넌트 언마운트 ----------------------------------------------→ 큰솔에 " Unmount" 라고 추력

 

useEffect를 이용한면 컴포넌트에 어떤 값이 변경되었을 때 특정 코드를 실행시키거나 라이프 스타일을 제어하는것

import './App.css';
import Controller from './components/Controller';
import Viewer from './components/Viewer';
  // 코드 추가 시작
import { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // useEffect에서 [count] state값이 바뀔때마다 첫번째 인수로 전달한 콜백함수 실행됨
  useEffect(() => {
    console.log(`count: ${count}`);
  }, [count]);
  const onClickButton = (value) => {
    setCount(count + value);
  };

  // 코드 추가 끝

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      {/* Viewer와 Controller는 형제관계임으로 props전달 불가 */}
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller onClickButton={onClickButton} />
      </section>
    </div>
  );
}

export default App;

useEffect를 호출하면 두번째 인수로 전달한 [count] state의 값이 바뀔 때마다 

() => {
    console.log(`count: ${count}`);
  }

콜백 함수 실행된다. 

 

변경된 값을 카운터에 호출한다. 

 

콜백 함수 뒤에 있는 [count] ← 배열에 뭘 넣느냐에 따라 다르게 동작한다.

즉, 의존성 배열(dependency array)라고 한다. → deps

 

deps

- 값 여러개 넣어도 됨

 

useEffect는 deps의 값이 변경되어야 실행된다. 

 useEffect를 이용하면 컴포넌트에서 원하는 값이 바뀌었을 때만 특정 동작을 callback함수로 실행하도록 만들어 줄 수 있다.

+100 버튼을 누를때 0도 함게 출력된다. 그 이유는 무엇이냐면

 

보라색 박스 부분 → 비동기로 동작한다. 

비동기로 동작?

함수를 여기서 호출했지만 함수의 완료는 나중에 뒤늦게 되는 것을 의미한다. 

 

console.log(count)의 값이 출력되었어도 박스 부분인 count state 값은 아직 처리되지 않은 것이다 .

그래서 버튼을 계속 누를때마다 변경되기 이전의 값이 출력되는 것이다 .

 

변경된 state의 ㄱ밧을 바로 사용해서 뭔가 side effect에 해당하는 부가적인 작업을 하고 싶을 때는 위에와 같이 하면 안된다. 🙅🏻‍♀️

useEffect 훅을 이용해야된다. 

---

useEffect로 라이플사이클 제어하기

1. Mount - 생성 (컴포넌트가 처음 생성되어 DOM에 렌더링)

2. Update - 변화, 리렌더링 (상태나 props의 변화로 리렌더링되는 시점)

3. Unmount - 죽음 (컴포넌트가 DOM에서 사라질 때)

 

1. Mount(생성)가 화면에 처음 나타날때

  useEffect(() => {
    console.log('mount');
  }, []);

 

deps(의존성 배열)을 빈 배열[ ]로 주면, useEffect는 컴포넌트가 처음 렌더링 될 때 딱 한번만 실행된다. 

 

2. Update

 useEffect(() => {
    if (!isMount.current) {
      isMount.current = true;
      return;
    }
    console.log('update');
  }, []);

상태가 변할때 다시 리렌더링된다.

import { useEffect } from 'react';
const Even = () => {
  useEffect(() => {
    // useEffect에 callback함수를 반환하는 것을 "클린업, 정리 함수"라고 한다.
    // 정리함수는 useEffect가 끝날때 실행된다.
    return () => {
      console.log('unmount');
    };
  }, []);
  //   deps를 빈배열로 전달해주면 useEffect는 언제 실행되냐? mount가 될때 실행된다.
  //   종료는 그 반대인 unmount가 될때 종료된다.
  return <div>짝수입니다.</div>;
};

export default Even;

정리 함수는 useEffect의return에서 정의하며, 컴포넌트가 사라질때 실행된다. 

ex, 특정 조건에 따라 컴포넌트가 사라지는 경우(짝수 일때만 <Even /> 렌더링), 해당 컴포넌트는 unmount된다. 

<section>
	<Viewer count={count} />
	{count % 2 === 0 ? <Even /> : null}
</section>

count가 짝수일때만 <Even/> 컴포넌트가 렌더링되고, 홀수가 되면 사라진다. 이때 unmount 발생

---

React 개발자 도구 사용하기