useEffect의 deps에 함수가 들어가는 의미, 그리고 뒷정리 함수에 대한 질문

TA님 안녕하세요 :)

우선 도움이 되어서 다행입니다!

1. 좋은 질문입니다. 결론부터 말씀드리자면 자바스크립트의 함수는 다른 변수와 동일한 1급 객체(1st class citizen)이기 때문이에요. 자바스크립트 함수는 primitiva value(number, string,..), object, array뿐만 아니라 함수도 return이 가능해요. 즉, 다른 변수들처럼 함수 자체도 변동이 될 수 있는거죠. useEffect의 dependency(의존) 배열에는 effect에 영향을 주면서 바뀔 수 있는 모든 값들을 추가해줘야 하고요. 바뀌는 함수의 쉬운 예시를 보여드릴게요:

const y = (x1) => (x2) => x1+x2

const y2 = y(10) // 여기서 y는 (x2) => 10 + x2라는 함수를 리턴하게 되고 해단 함수는 y2에 저장이 되죠.

y2는 함수이지만 x2에 따라 바뀌는 함수가 됩니다. 물론 setImageUrl 같은 함수가 이 함수처럼 바뀌는 함수는 아닙니다만 이런 의미에서 자바스크립트에서는 함수 자체가 다른 값들과 동일한 성질을 갖고 있기 때문에 함수들 또한 depedency 배열에 삽입을 해줘야 합니다.

2. 말씀하신 부분대로 적용을 해도 아마 작동은 정상적으로 할거에요. 그 작업을 return () => //여기서 하는 이유는 이펙트 실행 전뿐만 아니라 해당 페이지를 이탈 했을 때도 적용하기 위함이에요. 이 처리를 하지 않으면 더 이상 사진 리스트를 보여주고 있지 않음에도 불구하고 observer가 계속 "감시"하는 작업 자체를 하고 있을거에요.

아래는 간단한 useEffect 관련 설명 추가해봤습니다

useEffect(()=> {

  const id = setInterval(()=> console.log("hello"), 1000) // 1초 마다 "hello"가 콘솔에 찍힙니다

  return () => clearInterval(id) // 해당 컴퍼넌트가 화면에 더 이상 나오지 않으면 이 부분이 실행 됩니다

// 그러면 해당 컴포넌트가 없어지면서 더 이상 콘솔이 찍히지 않게 되죠.

},[])

저도 이거 물어보려고 했는데, 생각보다 중요한 내용같은데

현재 프로젝트에 대해서 설명하다보니 정작 중요한 내용을 빠지고 설명한거 같아 뭔가 찝찝하네요. 알것 같지만 정확히 아는게 아니라서....

이건 강의 설명전에 따로 넣어야 할정도로 중요한 부분 같습니다.