의문의 시작
- 개발을 하던 도중, 이 글의 제목과 같은 의문이 생겼다.
- 이 의문이 무엇인지에 대하 간단히 설명하자면 useEffect, useCallback, useMemo, useLayoutoff 같은 hook은 인자로 callback 함수와 deps를 받는다. 이 때 deps에 넣은 값이 변경되면 callback을 다시 실행한다.
- hook의 사용법이나 어떻게 동작하는지 알고 싶다면 관련된 다른 글을 보거나, 아래의 공식 문서를 읽는 것이 도움이 될 것이다.
https://ko.reactjs.org/docs/hooks-reference.html
- 다시 본론으로 돌아가, 이런 의문이 생긴 이유는 hook의 deps에 object를 넣는 일이 생겼다. object를 넣었을때는 어떤 경우에 콜백 함수가 실행될까라는 의문이 들었다. object 내부의 프로퍼티가 바뀌었을때도 감지해서 콜백 함수가 실행될까? 혹은 key, value가 같은 object로 바뀌었을때는 콜백함수가 실행될까라는 의문이 들었다.
- 결론적으로 설명하면, objectA !== objectB가 성립되면 콜백 함수가 실행되었다. 즉 내부의 프로퍼티 변경을 감지하는 것이 아닌 단순히 객체의 주소 값만을 비교하고 달라지면 콜백 함수를 실행하는 것이였다.
- 따라서 당연한 이야기겠지만, 테스트를 해 보았을때 objectState의 프로퍼티를 변경하거나, 프로퍼티를 변경한 후 그 객체를 다시 setState 해줘도 콜백함수는 실행되지 않았다.
동작 원리
- 물론 여기까지만 봐도 짐작으로 deps의 변화를 어떻게 감지하는지 유추가 되지만, 정확히 어떻게 돌아가는지 확인하고 싶어서 찾아보기 시작했다. 처음에는 TypeScript에 정의된 deps의 타입을 찾아보았다. deps의 타입은 dependencyList라고 나오고 배열 안에 값이 들어가는 것만 확인할 수 있었다.
- 그 다음으로 찾아본 것은 React의 GitHub 코드를 찾아보았지만 너무 방대한 나머지 처음에는 찾다 포기를 하였다.
- 이에 관련된 글이 있을까 싶어 찾아보다가 믿음직하고 설명도 잘 되어 있는 글을 찾았다. 바로 netlify의 기술 블로그?였다.
https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/
- 또한 이 글을 읽고 다시 React 공식 GitHub를 찾아보니 deps의 동작 부분을 확인하고 이해할 수 있었다.
- 결론적으로 얻은 결론은 단순히 새로운 deps 배열과 기존 deps 배열을 for문으로 돌면서 값을 하나하나 비교해서 값이 하나라도 다르다면 콜백 함수를 실행시켜주는 식이였다.
- 그 비교는 단순히 a===b를 통한 비교였고, 따라서 오브젝트의 프로퍼티가 달라지면 그 부분은 확인할 수 없었다.
- 물론 React에서는 불변성을 지키기 위해 오브젝트의 프로퍼티를 바꿀 때는 새로운 오브젝트를 생성하기 때문에 대부분의 경우 이 부분이 문제가 되지는 않을 것이다.
- React 공식 GitHub에서 이러한 동작을 여러 부분에서 확인할 수 있지만, 가장 쉽게 이해할 수 있는 부분은 아마 이 부분인 것 같다.