질문 드립니다!

Question

안녕하세요 재승님! 영상 참 재밌고 유익하게 보고 있습니다. useEffect에 종속성 배열을 없애고 사용하는 활용법을 알려주셨는데요. 여기서 궁금증이 생각나서 글을 쓰게 되었습니다.. 종속성 배열을 없애고 콜백함수 내부에서 조건을 통해 로직을 핸들링하는 경우에 useEffect가 리액트에 의해 실행? 될텐데요. 이러한 경우 콜백함수는 매번 호출되고 내부로직에서 조건을 분기할 것 같아요. 제가 이해한 내용으로는 이 경우가 조금 불필요한 동작이라고 생각이 드는데요. 여기서 종속성배열과 콜백함수 내부 조건을 함께 사용하면 좋을 것 같다고 생각 했어요. 그때 종속성배열을 관리하는 리소스와 비교하였을 때 어느쪽에 중점을 두어 프로그래밍하면 좋을지 궁금증이 생겼습니다... -> 그런데 제가 생각한 것이 틀렸다면 useEffect의 실행동작을 잘 이해하지 못했을 것 같은데요. 리액트에 의해서 해당 useEffect 훅의 동작 순서가 온다면 종속성 배열로 콜백함수의 불변성만 지켜주는 것인가요? 그렇다면 매번 콜백함수를 실행해서 별로 상관 없을 것 같기두 하구요.. 여러개의 종속성 값으로 useEffect나 useMemo, useCallback류의 훅이 여러번 호출되는 것 때문에 조금 스트레스 였는데.. 이번 강의를 보고 코드 개선 아이디어에 도움이 많이 되었습니다. 주절주절 쓰다보니 길어졌네요.. 두서없이 글로만 쓰려니 정리가 안되고 있슴다ㅎㅎ; 양해 부탁드립니다; 후배에게 답변해주시는 것 같이 편하게 답변해주시면 좋겠습니다. 항상 감사드립니다!!

이재승 · Answer

안녕하세요 조건에 따라 코드 실행 여부를 결정할 때, 1. 의존성 배열로 컨트롤 2. 제가 언급한 함수 내부 조건으로 컨트롤 중에 뭐가 더 나은지 문의하신 것 같습니다. 성능만 놓고 보자면 말씀하신대로 더 적게 함수를 호출하는 1번이 낫습니다 하지만 거의 모든 프로젝트에서 이로인한 성능 차이를 느끼기는 힘들 것 같습니다 강의에서 언급한 것처럼 1번은 생산성에 안좋은 경우가 종종 있습니다 예를 들어, 속성값으로 받은 함수를 부수효과 함수 내부에서 사용하는 경우입니다 그 함수를 의존성 배열에 넣는 순간, 그 함수의 레퍼런스가 변하지 않도록 잘 관리해야합니다 그래서 개인적으로는 2번을 추천합니다 그렇다고 무조건 2번만 사용할 수 있는것은 아니고, 의존성 배열을 입력해야하면서 속성값으로 받은 함수를 부수효과 함수 내부에서 사용해야만 하는 경우가 있습니다 이럴 때는 강의에서 언급한대로 속성값으로 받은 함수를 ref 로 전달하는 방식을 사용합니다