함수 useEffect는 어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅이다. 이를 ‘특정 값을 검사한다’라고 표현한다. useEffect를 이용하면 컴포넌트의 State 값이 바뀔 때마다 변경된 값을 콘솔에 출력하게 할 수 있다.

useEffect(callback, [deps]

• deps(Dependency Array) - 의존성 배열, 이 배열 요소의 값이 변경되면 첫 번째 인수로 전달된 콜백을 실행한다. 의존성 배열 요소가 여러 개 있어도 콜백을 실행할 수 있다.

값 검사하기

(...)
function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState(""); 
b
  const handleSetCount = (value) => {
    setCount(count + value);
  };
  const handleChangeText = (e) => { 
    setText(e.target.value);
  };b

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

  return (
    <div className="App">
      <h1>Simple Counter</h1>
      <section>
        <input value={text} onChange={handleChangeText} /> 
      </section>b
      <section>
        <Viewer count={count} />
      </section>
      <section>
        <Controller handleSetCount={handleSetCount} />
      </section>
    </div>
  );
}
export default App;

사용자 입력을 처리하기 위해 value 속성에 변수 text를 전달하고, onChange 이벤트 핸들러로 함수 handleChangeText를 전달한다. text와 count의 값이 변경되면 콜백 함수를 실행해서 콘솔에 변화된 값이 찍힌다.

라이프 사이클 제어하기

useEffect로 컴포넌트 라이프 사이클을 제어하는 방법을 알아본다.

1. 라이프 사이클 - 마운트

useEffect(() => { 
    console.log("컴포넌트 마운트");
  }, []);

의존성 배열에 빈 배열을 전달하면 컴포넌트의 마운트 시점에만 콜백을 실행한다.

2. 라이프 사이클 - 업데이트

useEffect(() => { 
    console.log("컴포넌트 업데이트");
  });

이렇게 useEffect의 두 번째 매개변수인 의존성 배열에 아무것도 전달하지 않으면 useEffect는 컴포넌트를 렌더링할 때마다 콜백을 실행한다.

근데 이렇게 되면 처음 페이지에 렌더링하는 마운트 시점에서도 콜백이 실행된다.