useState vs useEffect 활용관련 문의
useState는 componet의 구성요소의 상태값일 관리하고
상태변환시에 biz처리 및 관련된 자식 구성요소로 props 전달을 하고자 할때 사용하는 것으로 강의를 이해했습니다.
반면 useErrect는 라이프싸이클을 통해 biz 로직을 구현하고자 할때 사용하는 것으로 아래 이했습니다.
mount - 초기 실행시 (초기 데이터 설정-db select통한 값을 설정 처리 등)
update - state에서 관리되는 상태에 대한 실시간 확인과 처리(useState의 setXXXX는 비동기로 실시간 값이 어려워 useEffect를 활용해 v실시간 alidation을 체크하는데 있을것으로 이해하였습니다.
질문)
실무에서 useEffect의 어떻게 활용하나요?
지금은 hook을 배우는 단계라 실무에서 어떻게
사용될지도 많이 궁금합니다.
답변 1
0
안녕하세요 이정환입니다.
강의에서 말씀드렸듯 useEffect는 컴포넌트의 사이드이펙트를 관리할 목적으로 제공됩니다.
(그래서 이름도 사이드 이펙트에서 따와 useEffect라고 지어지게 된 것 같습니다. )
컴포넌트의 사이드이펙트(부수 효과)란 컴포넌트의 주요한 목적과는 무관하게 발생해야 하는 일을 말합니다. 이때 컴포넌트의 주요 목적은 "UI를 화면에 렌더링" 하는 일 이므로, 이러한 렌더링 작업 외의 다음 작업들은 부수효과 즉 사이드 이펙트라고 말 할 수 있습니다.
서버로부터 데이터를 불러온다.
현재 컴포넌트의 라이프사이클을 콘솔에 출력한다.
기타 등등 ...
결론적으로 useEffect는 특정 컴포넌트의 사이드이펙트(부수효과)를 관리하기 위해 제공되며, 이러한 사이드이펙트에는 위에 언급한 사항들이 있습니다.
실무에서는 보통 서버로부터 데이터를 불러올 때에 useEffect를 주로 활용합니다. 구체적으로는 의존성 배열인 deps를 빈 배열로 전달하여 컴포넌트 Mount 시점에 데이터를 불러오는 식 입니다. 또는 특정 스크립트를 실행하기 위해 사용되기도 합니다.
관련해서 읽어보시면 좋을 아티클도 함께 첨부드립니다.
useEffect와 lifecycle문의
0
7
1
프론트엔드 학습 수준 문의
0
25
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
41
2
데이터 로딩중 화면만 계속 나와요!!
0
51
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
76
2
이후의 커리큘럼 문의
0
101
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
49
2
최적화 관련 질문있습니다 (useMemo 등)
0
82
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
79
3
Date 객체에 관련하여 질문드립니다.
0
82
2
리액트 개정판 교재 질문
0
58
2
예제코드가 안나와요!
0
75
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
104
2
onMouseEnter 관련 문의 드립니다
0
89
3
배열의 렌더링 관련 질문 드립니다.
0
70
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
111
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
131
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
66
1
vs code 자동완성관련 문의
0
106
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
173
2
87강 필터 함수 질문
0
65
2
useRef, useState count 비교
0
64
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
86
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
73
2