이번에 작성한 글은 저의 생각과 GPT를 활용하여 궁금한 부분을 확인한 내용이므로 신뢰성이 비교적 낮을 수 있습니다. 만약 잘못된 지식이 존재한다면 댓글 부탁드립니다.

문득 useEffect 의존성 배열에 아래의 2가지 값을 담을 경우 어떻게 출력되는지 궁금해졌습니다.

1. 전역 변수로 선언된 경우(원시값, 참조값)
2. 지역 변수로 선언된 경우(원시값, 참조값)

데이터 타입에 따른 리렌더링 비교

• 따라서 총 테스트 할 부분은 전역변수 3가지(문자열, 배열, 객체)와 지역변수(문자열, 배열, 객체)입니다.

• 테스트 해볼 코드

  • 전역변수 : 빨간색
  • 지역변수 : 초록색
  • useEffect를 통해 리렌더링 여부 확인

• 결과는 아래와 같이 나옵니다.

  1. 처음 렌더링시 모든 값이 출력됩니다.
  2. 버튼을 클릭하여 상태값을 변경시켜 리렌더링을 발생시킵니다.
  3. 리렌더링이 발생합니다.
  4. 내부에 선언된 object 타입(객체, 배열)만 리렌더링이 발생합니다.

1. 왜 외부에 선언한 object 타입은 호출되지 않을까?
2. 왜 내부에 선언한 object 타입은 호출이 될까?
3. 왜 외부에 선언한 원시값은 호출되지 않을까?
4. 왜 내부에 선언한 원시값은 호출되지 않을까?

• 리액트의 경우 위 사진과 같이 리렌더링이 발생하면 새롭게 App 함수를 실행하게 됩니다. 이 과정에서 가상돔은 이전 App 컴포넌트와 비교해서 변경이 발생한 부분만 수정합니다.

외부에 선언한 값은 왜 호출되지 않을까?

1번과 3번의 질문인 외부에 선언한 경우 원시값이든, 참조값이든 외부 저장소에 해당값이 저장되어 있기 때문에 App 컴포넌트가 매번 새롭게 만들어지더라도, 변하지 않는 고정된 값을 가리키기 때문에 이전값과 달라지지 않아 useEffect가 실행되지 않고, 따라서 호출되지 않습니다.

내부에 선언한 원시값은 왜 호출되지 않을까?

내부에 선언된 원시값은 App 함수가 리렌더링될 때마다 새로 생성됩니다. 그러나 useEffect의 의존성 배열에 포함된 원시값은 Object.is 비교를 통해 이전 값과 동일한지 확인하고, 동일하다면 useEffect는 실행되지 않습니다. 따라서 호출되지 않습니다.

내부에 선언한 참조값은 왜 호출될까?

useEffect의 의존성 배열에 내부에 선언된 참조값을 추가할 경우, 이전값과 Object.is로 비교할때 이전값과 현재값은 동등하지만, 참조값이 달라지기 때문에 같다고 판단되지 않아 useEffect가 실행되고, 따라서 호출이 됩니다.