useEffect와 lifecycle문의

Question

useEffect 가 특정 변수값을 추적하다가 바뀌면 실행되는 함수를 등록하는 기능이라고 배웠는데 deps 의존성배열에다가 state 만 넣을수 있는건가요? 아니면 props 나 useRef 변수, 외부변수도 넣을수 있나요?     예전에 vuejs 를 했었는데 그때 기억하기론 lifecycle이 js 실행되기전, dom 생성되기전 등.. 좀 다양했던거같은데 react 는 mount 하나만 있어서 mount 시점이라는게 js가 실행완료되서 html 이 생성된 시점이라는 말인가요?   보통 useEffect 는 강의처럼 변수추적시 콘솔에 찍어야 하는경우 사용하거나 mount 때 서버에 데이터 가져오는경우 사용하는거죠? 사실 콘솔추적이라는건 devtool로도 할수 있는거같아서 실무에서 어디에 많이 쓰는지 궁금합니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 공부하는이님. React의 useEffect 와 관련된 몇 가지 질문을 주셨네요. useEffect 는 React 컴포넌트에서 중요한 훅 중 하나로, 여러 가지 측면에서 이해해야 할 부분이 많습니다. 제가 질문에 대한 설명을 드리겠습니다. 의존성 배열(deps)에 넣을 수 있는 것들: useEffect 의 의존성 배열은 state뿐만 아니라 props, useRef 의 current 값, 그리고 컴포넌트 내의 다른 변수(외부 변수 포함)도 넣을 수 있습니다. 이는 특정 값이 변할 때마다 useEffect 의 콜백이 실행되도록 설정하는 방식입니다. React의 라이프사이클과 useEffect : React의 useEffect 는 Vue.js의 라이프사이클 훅과는 약간 다릅니다. React는 기능적으로 간소화된 라이프사이클을 가지고 있습니다. useEffect 는 컴포넌트가 화면에 처음 렌더링될 때와 그 이후 리렌더링될 때 실행됩니다(의존성 배열에 따라 선택적으로 동작). 초기 마운트 후 DOM이 업데이트된 상태에서 실행되므로, js가 실행 완료되고 HTML이 생성된 이후의 시점입니다. 실무에서의 useEffect 사용: 실무에서는 주로 다음과 같은 시나리오에서 useEffect 를 사용합니다: 서버에서 데이터를 가져오는 경우: 컴포넌트가 처음 마운트될 때 데이터를 불러와야 할 때 주로 사용합니다. 데이터의 변경에 따른 UI 업데이트: 특정 상태나 props가 변할 때 반응하여 UI를 업데이트할 필요가 있을 때 사용됩니다. 브라우저 API와의 상호작용: 타이머 설정/해제, 이벤트 리스너 추가/삭제 등, 브라우저 관련 작업을 실행하거나 정리할 때 사용합니다. 관련된 유사한 논의는 다음 링크에서도 확인할 수 있습니다: useState vs useEffect 활용관련 문의 - useState와 useEffect의 차이와 실무에서의 활용에 관한 질문과 답변입니다. useEffect에 대해 질문있습니다. - useEffect의 동작 원리와 의존성 배열의 작동에 대한 설명입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.