CH16 에이전트(Agent)
위키독스
React에서 useEffect Hook과 클로저의 역할 이해하기
'useEffect' Hook은 사이드 이펙트를 처리하는 데 사용됩니다. 사이드 이펙트란 렌더링 이후에 발생하는네트워크요청, DOM조작, 이벤트 리스너 등록 등의 작업을 말합니다.
'useEffect'는 의존성 배열을 제공함으로써 특정 값의 변화에 따라 'useEffect'가 언제 실행되는지를 조절할 수 있습니다. 이를 통해 필요한 시점에만 사이드 이펙트가 수행되도록 할 수 있습니다. 이러한 이유로 EsLint의 'react-hooks/exhaustive-deps' 룰은 'useEffect' Hook 에서 사용되는 모든 상태를 의존성 배열에 명시하도록 권장하고 있습니다.
그런데 왜 의존성 배열에 상태를 명시해야 할까요? 그 이유는 "클로저 트랩"을 피하기 위함입니다. 'useEffect' 의 콜백 함수는 클로저입니다. 클로저는 자신이 생성될 때의 환경을 '기억'하는 함수를 말합니다. 이 콜백 함수는 생성되는 시점의 상태를 '기억'하므로, 만약 의존성 배열에 상태를 명시하지 않으면, 해당 상태가 변경되더라도 'useEffect'의 콜백 함수는 그 변화를 인지하지 못하고 처음 생성될 때의 값을 계속 참조하게 됩니다. 반면, 의존성 배열에 상태를 추가하면, 해당 상태가 변경될 때마다 'useEffect' 의 콜백 함수가 다시 생성되어 그때의 상태 값을 다시 '기억' 하게 됩니다.이를 통해 항상 최신의 상태 값을 참조하도록 할 수 있습니다.
결론적으로, 'useEffect'의 콜백 함수는 클로저로 구현되어 있으며, 이 클로저의 특성 때문에 의존성 배열에 상태 값을 명시해야 합니다.
JavaScript의 특징과 React의 동작 방식에 대해 이해하게 되면 이들을 올바르게 활용하여 코드의 효율성을 향상시키고 예상치 못한 버그를 방지할 수 있습니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 8월 4일 오전 1:27
댓글 0
함께 읽은 게시물
제가 리드하고 있는 조직(당근마켓 커뮤니티실)에서 백엔드 엔지니어를 채용 중이에요.
커뮤니티실에는 동네 이웃들의 이야기와 정보를 공유하는 동네생활팀, 이웃 간의 취미와 관심사를 연결하는 모임팀, 그리고 아파트 단지 생활을 더 편리하고 즐겁게 만들어 줄 단지팀이 있어요. 지금 내 동네에서 일어나고 있는 일들을 더 쉽게 즐기고 공유할 방법들을 찾는 일이라면 무엇이든 도전하여 실행에 옮겨요. 만드는 사람이 불편할수록 쓰는 사람은 편하다는 믿음으로 도전적인 문제를 풀어나갈 분과 함께하고자 해요.
... 더 보기
워케이션 문화가 없는 조직에서 워케이션 시도하기
저
... 더 보기무너지고 있는 프론트엔드, 백엔드 직군의 경계에 대한 고찰
AI 기술이 우리 일상과 산업 전반에 스며들면서 소프트웨어 개발 환경 역시 큰 변화의 물결을 맞이하고 있다. 특히 코딩을 돕는 AI 에이전트의 등장은 개발 생산성에 대한 큰 변화를 만들고 있다. 나 역시 이러한 변화를 체감하며, 나에게 익숙한 소프트웨어 개발의 대표적인 두 축인 프론트엔드와 백엔드 영역에서 AI 기술이 미치는 영향과 그로 인해 변화하는 소프트웨어 엔지니어의 역할에 대해 개인적인 생각을 정리해 본다.
... 더 보기
