일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 자바스크립트
- 웹디실기
- 비전공자
- PROJECT
- 코딩독학
- github
- 정보처리기사
- 웹디자인기능사
- CSS
- 생활코딩
- 코드공유
- git
- 실기
- 연산자
- 웹퍼블리셔
- jQuery
- 타입스크립트
- 웹디자인기능사실기
- HTML
- react
- 세로메뉴바
- 리액트
- 슬라이드전환
- JS
- JavaScript
- 렛츠기릿자바스크립트
- 깃
- Supabase
- web
- 프론트엔드
Archives
- Today
- Total
코딩하는라민
[React] Hooks - useEffect ( ) 본문
728x90
반응형
[React] Hooks - useEffect ( )
📌 클래스형 컴포넌트의 생명주기
Mount | Update | Unmount |
ComponentDidMount | ComponentDidUPdate | ComponentWillUnmount |
컴포넌트가 태어나는 순간 mount 되는 순간에 사용할 수 있는 메서드 | 컴포넌트가 변화하는 순간에 사용할 수 있는 메서드 | 컴포넌트가 화면에서 사라지기 이전에 사용할 수 있는 메서드 |
📌 useEffect
함수형 컴포넌트 본문에서 Side Effect 는 허용되지 않기 때문에 useEffect 라는 훅을 사용한다.
함수형 컴포넌트의 useEffect 는 클래스형 컴포넌트의 Life Cycle 의 componentDidMount, componentDidUpdate, componentWillUnmount 훅을 하나의 API 로 합친 것이다.
useEffect(didUpdate[, deps]);
useEffect 에 전달된 함수는 렌더링이 완료된 이후에 수행된다.
deps(dependency array, 의존성 배열) 는 비워놓거나 빈배열, 비교할 값을 넣을 수 있다.
의존성 배열(Dependency Array)
: 이 배열 내에 들어있는 값이 변하면 콜백 함수가 실행된다(뎁스라고도 부른다).
📌 Mount (처음 렌더링될 때)
컴포넌트가 렌더링 되고 나서 최초의 한번만 실행하고자 하는 함수가 있다면 deps 에 빈 배열을 넣어주면 된다.
useEffect(() => {
console.log('Mount 되었습니다.');
}, []);
📌 Update (리렌더링)
만약 빈배열도 넣지 않고 비워둔다면 해당 함수는 컴포넌트가 리렌더링이 될 때마다 실행된다.
useEffect(()=>{
console.log('페이지가 Update 되었습니다.')
})
특정 prop 이나 state 가 변경될 때마다 함수를 실행하고 싶다면 다음과 같이 배열 안에 해당 prop, state 를 넣어준다.
useEffect(()=>{
console.log(`${count} 가 변경되었습니다.`)
}, [count])
위의 경우처럼 함수 안에 prop 또는 state 가 있을 경우에 deps 에 배열을 넣어주면 된다.
📌 unmount (또는 Update 되기 직전)
이 함수자체는 마운트이지만, 함수 안에서 return 문을 반환하면 unmount 시에 실행된다.
useEffect(() => {
console.log('해당 컴포넌트가 Mount 되었습니다.');
return () => {
// unmount 시점에 실행
console.log('해당 컴포넌트가 Unmount 되었습니다.');
};
}, []);
참고 : 리액트 공식 문서, 멋쟁이사자처럼 4기 yamoo9 강의, 인프런-한입 크기로 잘라먹는 리액트 강의 수강
등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.
728x90
반응형
'Core > React' 카테고리의 다른 글
[React] Hooks - useMemo (최적화하기) (0) | 2023.03.06 |
---|---|
[React] Hooks - Context API (0) | 2023.03.06 |
[React] 라이프사이클(LifeCycle) - React 의 생명주기 (1) | 2023.03.05 |
[React] Hooks - useState ( ) (0) | 2023.03.05 |
[React] form 제어하기 (0) | 2023.02.28 |