[한입 크기로 잘라 먹는 리액트] - 라이프사이클

 

---

강의 - Section 7 : 라이프사이클

유데미 : https://www.udemy.com/course/winterlood-react-basic/

인프런 : 

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런

---

 

 

 

라이프사이클

라이프사이클이란?

 

* 라이프사이클 이란? 컴포넌트의 생성, 업데이트, 제거 과정을 관리하는 데 사용되는 메서드들의 집합이다. 생애주기를 뜻하는 단어이며 이 과정은 크게 세가지로 나눌 수 있다.

 

1. Mount(탄생)

 - 컴포넌트가 탄생하는 순간

 - 화면에 처음 렌더링 되는 순간

 => A 컴포넌트가 Mount 되었다! 라고 말하는 것은 A 컴포넌트가 화면에 처음으로 렌더링 되었다 라는 뜻

 

2. Update(변화)

 - 컴포넌트가 다시 렌더링 되는 순간

 - 리렌더링 될 때를 의미

 => A 컴포넌트가 Update 되었다! 라고 말하는 것은 A 컴포넌트가 리렌더링 되었다 라는 뜻

 

3. UnMount(죽음)

 - 컴포넌트가 화면에서 사라지는 순간

 - 렌더링에서 제외되는 순간을 의미;

 => A 컴포넌트가 UnMount 되었다! 라고 말하는 것은 A 컴포넌트가 화면에서 사라졌다 라는 뜻

 

 

* 리액트 컴포넌트의 라이프사이클 예시

Mount(서버에서 데이터를 불러오는 작업) → Update(어떤 값이 변경되었는지 콘솔에 출력) → UnMount(컴포넌트가 사용하던 메모리 정리)

 

 

라이프사이클

useEffect 사용하기

 

 

* useEffect란? 함수형 컴포넌트에서 사이트 이펙트를 관리하기 위해 사용하는 훅(Hook)이다.

(여기서 사이드 이펙트란, 컴포넌트의 주요 목적(렌더링 UI)외에 발생하는 부수적인 작업을 말한다. 리액트의 주요 목적은 UI를 렌더링하는 것이지만, 실제 애플리케이션에서는 서버에서 데이터 가져오기(API 호출), DOM을 직접 조작하기, 로그를 기록하거나 상태를 저장하기, WebSoKet 연결 관리 등 외부에서 작업이 발생한다. 이를 모두 사이드 이펙트라 한다)

 

 

* useEffect 기본 문법

useEffect(effectFunction, dependencyArray);

 

 - effectFunction : 실행할 동작을 정의한 콜백 함수. 이 함수는 컴포넌트가 렌더링된 이후에 실행된다.

 - dependencyArray : 의존성 배열로, 이 배열에 포함된 값이 변경될 때만 effectFunction이 실행된다(deps라고도 불림)

  · 빈 배열 [ ] : 마운트 시 한 번만 실행

  · 값이 있는 배열 [state, props] : 배열의 값이 변경될 때 실행

  · 생략 : 렌더링될 때마다 실행

 

 

* useEffect 예시

function App() {

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

  useEffect(() => {
    console.log(`count : ${count}`)
  }, [count]);

  const onClickButton = (value) => {
    setCount(count + value);
  }

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <Viewer count = {count}/>
      </section>
      <section>
        <Controller onClickButton = {onClickButton}/>
      </section>
    </div>
  )
}

export default App

 

 - 위처럼 코드를 작성하면 count가 변화할 때 마다 console창에 count 값이 나오게 된다.

 

 

* 그렇다면, 클릭 이벤트 안에 넣는다면?

const onClickButton = (value) => {
    setCount(count + value);
    console.log(`count : ${count}`);
}

 

 - useEffect가 꼭 필요할까? onClickButton 이벤트 안에 setCount로 값을 바꾼 후 그 값을 console에 출력한다면?

  : 결론은 안됨! 이유는 setState는 비동기로 동작하기 때문. 즉, 상태가 즉시 변경되는 것이 아니라 렌더링 작업이 끝난 후 업데이트가 된다.

 

 - 리액트는 렌더링 성능을 최적화하기 위해 여러 상태 변경 요청(setState)을 모아 한꺼번에 처리한다. 이를 통해 재렌더링을 방지하고 효율적으로 화면을 업데이트 한다.

 

 - 클릭 이벤트 발생 시 실행 흐름을 적어보자면, 

   ① onClickButton( value ) 실행

   ② setCount( count + value ) 호출하여 상태 변경 요청(아직 요청만!!)

   ③ console.log(`count : ${count}`) 실행. 아직 상태값(count)가 변경되지 않았으므로 변경 이전의 값 출력 // 0

   ④ 리액트 상태 변경 작업(비동기 처리)

   ⑤ 새로운 상태값으로 컴포넌트 리렌더링

   ⑥ count가 변경되었기 때문에 useEffect 실행 // 1

 

 

 

라이프사이클

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

 

 

* Mount

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

 

 - useEffect의 deps가 빈 배열인 경우 컴포넌트가 처음 마운트될 때 한 번만 실행된다. 이 패턴은 초기화 작업에 주로 사용된다(데이터 로드, 이벤트 리스너 등록 등에 사용)

 

 

* Update

useEffect(() => {
   console.log("update!");
});

 

- useEffect에 deps가 없는 경우 모든 리렌더링 시 실행된다(상태 변경 로그 출력, DOM 상태 변경 감지 등에 사용된다)

 

 

* UnMount

useEffect(() => {
    // 클린업, 정리함수
    return () => {
        console.log("unmout");
    }
}, []);

 

 - useEffect안에서 return으로 반환된 함수는 정리(clean-up)함수로 동작한다. 정리함수는 컴포넌트가 언마운트될 때, 의존성 배열이 변경되어 useEffect가 다시 실행되기 직전에 자동으로 호출된다.