useEffect에 대해 질문있습니다.

Question

프론트엔드 개발자로 취업을 준비중입니다. 공부를 하면서 useEffect에 대해 아무리 봐도 너무 이해가 되지 않더라구요. 우선 제가 이해한건 데이터를 가져올 때 오류가 날 수 있는 상황이 오므로 사용자에게 UI를 우선 보여주고 그 다음 useEffect 부분이 실행이 된다.... 까지 이해하고 있습니다. 그런데 스크롤 이벤트나, 다른 이벤트도 useEffect안에 작성이 된 부분도 있고 또 useEffect 마지막에 [] 배열 부분에 어떤 값을 작성하면 이 값만 한번 실행이 된다... 이말도 무슨 말인지 이해가 되지 않더라구요.

그래서 useEffect에 대해서 좀 더 쉽게 알려주시면 너무 감사드리겠습니다.

최여진 · Answer

안녕하세요! useEffect 는 리액트 컴포넌트가 화면에 렌더링 된 이후에 어떠한 작업을 수행하도록 해줍니다.

즉, useEffect(callback, dependency) 형태에서
dependency 배열 안에 있는 값이 변경될때마다 callback 함수가 실행됩니다.

배열 안에 아무것도 안넣으면([]) -> 컴포넌트 처음 만들어질때 한번만 callback 함수 실행 (ex. 이벤트 리스너 등록, data 가져오기 등)

배열 안에 특정 값을 넣으면 -> 그 값이 변경될때만 callback 함수 실행 (ex. state 로 관리하던 유저 이름이 변경되어서 해당하는 user의 data 를 fetch 해야한다던가?)