React에서 useEffect를 활용한 상태 값 변화 확인 방법

리액트에서는 useEffect 훅을 활용하여 상태 값이 변화할 때마다 특정한 동작을 수행할 수 있습니다.

이번 포스트에서는 useEffect 훅을 사용하여 상태 값이 변할 때마다 console.log를 통해

값의 변화를 확인하는 방법에 대해 알아보겠습니다.

 

 

리액트에서 useState 훅을 사용하여 상태 값을 변경할 때마다 

useEffect 훅으로 값을 확인하고 싶을 때가 있습니다.

그런데 의존성 배열을 비워놓으면 콘솔에 값이 출력되지 않습니다.

그렇다면, 어떻게 의존성 배열을 설정하면 좋을까요? 

 

의존성 배열에 상태 값 자체를 넣는 것은 무한 렌더링을 발생시키므로 올바르지 않습니다. 

대신, useEffect 함수 내부에서 상태 값을 참조하도록 코드를 작성해야 합니다.

예시 코드📌

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

const countClick = () => {
  setCount(count + 1);
};

useEffect(() => {
  countClick();
  console.log("count", count);
}, []);

 

위 코드에서는 useEffect 훅 내부에서 count 값을 참조하고 있습니다. 

의존성 배열이 빈 배열인 상태이기때문에 useEffect 훅이 처음 랜더링 될 때 한번 실행되면서,

countClick 함수가 실행되고 count 값이 1 증가합니다.

그리고 console.log("count", count)에서 찍히는 count 값은,

랜더링시에 설정된 초기 값인 0이 출력됩니다.

따라서, 의존성 배열을 설정할 때는 상태 값 자체를 넣지 않고, useEffect 함수 내부에서 상태 값을 참조하도록 코드를 작성해야 합니다. 이를 통해 상태 값의 변화를 콘솔로 확인할 수 있습니다.

 

함수를 onClick이벤트로 버튼태그에 연결해볼게요. 

  <button onClick={countClick}>클릭</button>

 

아무리 클릭을 눌러도 count의 값은 업데이트 되지않아요. 

당연하게도 의존성배열을 비워두게되면 최초로 한 번만 랜더링되고 이후로는 업데이트가 되지않아요.

 

 

그럼 반대로 의존성배열에 count값을 넣게되면 어떻게 될까요?

useEffect의 콜백함수가 실행될때 count가 변경되기때문에 

콜백 함수 내부에서 countClick()이 호출되면 count가 변경되고, 그럼 다시 useEffect가 호출되고,

또 countClick()이 호출되는 무한 반복이 발생하게 됩니다. -> 무한랜더링🤐

 

잠깐 앞에서 useEffect의 콜백함수가 실행된다고 했습니다.

여기서 콜백함수가 어디있지? 하실텐데요.

 

useEffect의 첫번째 인자는 실행할 함수, 즉 콜백 함수입니다.

useEffect를 호출할 때 첫번째 인자로 전달한 콜백 함수는 컴포넌트가 렌더링될 때마다 실행됩니다.

따라서 useEffect는 컴포넌트가 화면에 나타날 때, 컴포넌트가 업데이트될 때, 컴포넌트가 사라질 때마다 실행됩니다.

이때 첫번째 인자로 전달한 콜백 함수가 실행되는 것입니다.

 

useEffect 내부에서 console.log를 출력하면 이전 값을 가져오는 이유는

useEffect는 렌더링 이후에 비동기적으로 실행되기 때문입니다.

 

useEffect의 콜백 함수는 다음과 같은 순서로 비동기적으로 실행됩니다.

 

1. 렌더링
컴포넌트가 렌더링될 때 useEffect의 첫 번째 인자로 전달된 콜백 함수가 실행되지 않습니다.

2. DOM 업데이트 예
컴포넌트의 상태나 프로퍼티가 변경되면 React는 DOM을 업데이트 합니다.
이때 useEffect의 첫 번째 인자로 전달된 콜백 함수가 예약됩니다.
예약된 콜백 함수는 DOM 업데이트가 완료된 후 비동기적으로 실행됩니다.

3. 콜백 함수 실행
콜백 함수가 실행되면 컴포넌트가 화면에 나타나고, 상태 값이 변경되거나 이벤트가 발생하면 다시 렌더링됩니다.
이때 useEffect의 의존성 배열에 의존하는 값이 변경되면, 다시 DOM 업데이트가 일어나고, 콜백 함수가 다시 예약됩니다.
이전에 예약된 콜백 함수는 취소되고, 새로운 콜백 함수가 예약됩니다.
다시 예약된 콜백 함수는 DOM 업데이트가 완료된 후 비동기적으로 실행됩니다.

즉, useEffect의 콜백 함수는 렌더링된 이후 DOM 업데이트가 완료된 후 비동기적으로 실행됩니다. 

useEffect는 렌더링 전후의 상태나 프로퍼티 값을 참조하거나, 이벤트 리스너 등의 외부 자원을 사용할 수 있습니다.

 

 

따라서 useEffect 내부에서 출력하는 상태 값은 이전 렌더링의 값을 가져올 수밖에 없습니다.

현재 렌더링된 최신 상태 값을 확인하려면, useEffect 의 의존성 배열(dependency array)에 해당 상태를 추가하고,

해당 상태가 변경될 때마다 useEffect 내부에서 출력하는 방법이 있습니다.

 

아래 코드처럼 useEffect의 의존성 배열에 count를 추가하였기 때문에,

count가 변경될 때마다 useEffect 내부의 console.log가 실행되면서 현재 랜더링된 최신값이 출력됩니다.

  useEffect(() => {
    countClick();
    console.log("count", count);
  }, []);

  useEffect(() => {
    console.log("count2", count);
  }, [count]);

 

이제 countClick 함수 내부에서 count 값을 변경해도 무한 랜더링이 발생하지 않고,

최신 값이 정상적으로 출력됩니다.