클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방한 것이 바로 useEffect가 되는 것. 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.
컴포넌트의 LifeCycle
React는 컴포넌트 단위로 화면에 렌더링을 한다. 이 때 각각의 컴포넌트는 LifeCycle을 갖는다.
생성 [Mount] 이 될수도 있고 (페이지에 장착하기),
재렌더링 [Update] 이 될수도 있고 (가끔 업데이트하기),
삭제 [Unmount] 가 될 수도 있다. (필요없으니 제거해버리기)
1. 배우는 이유?
컴포넌트 인생 중간중간 간섭이 가능해진다.-> 중간중간 코드 실행이 가능하다는뜻
실행할 갈고리 달듯 걸기 => hook
mount, update 시 코드를 실행해주는 hook의 이름 : useEffect이다.
Mount
- fetch, scroll event, setInterval 와 같은 초기 설정이 필요한 경우 이곳에서 작업을 진행한다.
- 컴포넌트가 화면에 나타나게 됐을때 호출된다.
- 즉, DOM트리에 삽입된 직후, 초기 브라우저 화면을 갱신하기전에 호출된다.
Update
- 컴포넌트의 업데이트는 props와 state의 변화에 따라 결정된다.
Unmount
- 웹 브라우저 상에서 컴포넌트가 지워질 때 실행이 된다.
- 즉, 컴포넌트가 DOM에서 사라지기 전에 호출하는 메소드이다.
- 앞전에 Mount 시 등록한 이벤트, 타이머, 직접 생성한 DOM은 이 메소드로 제거해야한다.
2. 사실 쓰나 안 쓰나 동작은 똑같음. 근데 왜 씀?
useEffect 안에 적은 코드는 html 렌더링 이후에 동작하기 때문임
function Detail(){
(반복문 10억번 돌리는 코드)
return (생략)
}▲ 여기에 대충 적으면 반복문 돌리고 나서 하단의 html 보여줌
function Detail(){
useEffect(()=>{
(반복문 10억번 돌리는 코드)
});
return (생략)
}▲ useEffect 안에 적으면 html 보여주고 나서 반복문 돌림
3. 언제 쓰면 좋나요?
사용과 미사용의 차이점?
실행 시점이 약간 다르다.
=> 조금이라도 html 렌더링이 빠른 사이트를 원한다면 넣으면 된다.
useEffect 안에 있는 코드는 html 렌더링 후에 동작한다
시간이 오래걸리는 어려운 연산, 서버에서 데이터를 가져오는 작업, 타이머 장착 하는 경우 등
4. 이름이 왜 ~~ effect ?
Side Effect : 함수의 핵심기능과 상관없는 부가기능을 가리키는 말 거기서 따왔다.
useEffect에 넣을 수 있는 실행 조건
useEffect( () => { 실행할코드 }, [count])ex) [ ] 안에 count가 있기에 count라는 변수가 변할 때만 useEffect 안 코드를 실행한다는 뜻
useEffect()의 두번째 파라미터로 [] 를 넣어 거기에 변수나 state 같은 것들을 넣을 수 있음 , 여러개도 가능
[ ]에 있는 변수나 state가 변할 때만 useEffect 안 코드를 실행해줌
암 것도 안넣으면 mount (로드)시 1회만 실행하고 끝
5.정리
읽어보기 & 참고
코딩애플 강의 참고
https://velog.io/@edie_ko/React-Component%EC%9D%98-Lifecycle
https://velopert.com/3631
