[3주차] 한 입 크기로 잘라먹는 리액트 - useEffect

3/24~3/30

사람 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 있음
= 라이프사이클

 

라이프사이클은 3단계

탄생: 마운트 - 컴포넌트를 페이지에 처음 렌더링할 때
갱신: 업데이트 - State나 Props의 값이 바뀌거나 부모 컴포넌트가 리렌더 해
                           자신도 리렌더 될 때
사망: 언마운트 - 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때

 

라이프 사이클 제어 

1. 컴포넌트가 처음 렌더링될 때 특정 동작을 하도록 만들거나,
2. 업데이트할 때 적절한지 검사하거나,
3. 페이지에서 사라질 때 메모리를 정리하는 등

 

 

= 리액트 훅의 하나인 함수 useEffect를 이용하면 이 사이클을 쉽게 제어할 수 있음

 

useEffect

어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅
= 특정 값을 검사한다

 

= useEffect를 이용하면 컴포넌트의 State값이 바뀔 때마다 변경된 값을 콘솔에 출력하게 할 수 있음.

 

하나의 값 검사하기

import { useEffect, useState } from "react";
(...)

function App() {
  const [count, setCount] = useState(0);
  const handleSetCount = (value) => {
    setCount(count + value);
  };

useEffect(() => {
  console.log("count 업데이트: ", count);
}, [count]);

return (
  <div className="App">
    <h1>Simple Count</h1>
    <section>
      <Viewer count={count} />
    </section>
    <section>
      <Controller handleSetCount={handleSetCount} />
    </section>  
  </div>
);
}
export default App;

 

1. useEffect를 사용하기 위해 react라이브러리에서 불러옴

2. useEffect를 호출하고 두 개의 인수를 전달
    첫번째 인수: 콜백 함수 전달

    두번째 인수: 배열 전달

 

useEffect의 용법

useEffect(callback, [deps])
- callback: 콜백 함수
- [deps]: 의존성 배열(Dependency Array)

 

1. useEffect는 의존성 배열 요서에 State변수 count가 있는데,
    이 값이 바뀌면 콜백 함수 실행

2. 콜백 함수는 콘솔에 'count 업데이트' 라는 문자열과 함께 변경된 State값 출력

    => 저장하고 개발자 도구 콘솔을 확인하면

3. count 업데이트: 0이 콘솔에 출력. 
                               아직 State값을 변경한 적 없는데도 콘솔에서 문자열을 출력한 이유는,

                               State값을 초기화할 때도 useEffect가 이 변화를 감지하기 때문

4. <+10>버튼 5번 클릭: 개발자 도구 콘솔 확인하면

                                       버튼 클릭할 때마다, useEffect에 인수로 전달한 콜백 함수가 실행되어

                                       변경된 State값 콘솔에 출력