useEffect

useEffect

 

1. 컴포넌트가 마운트 됐을 때 (처음 나타났을 때 = 컴포넌트가 랜더링 됬을 때)

 

- 화면이 처음 떴을때 실행 하며 의존성배열deps에 [] 빈배열 사용

 

 

2. 컴포넌트가 언마운트 됐을 때 (사라질 때 = 컴포넌트가 사라질 때)

- 라이프싸이클중 componentDidmount처럼 실행
- 라이프싸이클중 componentWillUnmount처럼 실행

- unmount이전 / update직전에 어떠한 작업을 수행하고 싶을 때

- useEffect 에 rerutn문 사용( = clean up함수)

 

 

3. 컴포넌트가 업데이트 될 때 (특정 props나 state 가 바뀔 때 ) 

- componentDidUpdate처럼 실행

- 의존성배열deps에 넣은 파라미터값이 업데이트 됬을때 실행

 

 

반응형

 

😉 리액트 라이프 싸이클( = 생명주기)

 

https://react.vlpt.us/basic/25-lifecycle.html

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

 

1. 마운트 ( Mount )

DOM 객체가 생성되고 브라우저에 나타나는것
Constructor / GetDerivedStateFromProps / Render / ComponentDidMount

Constructor : 컴포넌트 클래스의 생성자 함수로 state의 초기값을 지정할 때 사용

GetDerivedStateFromProps : props를 이용해 state 값을 얻을때 사용

Render : 컴포넌트의 기능과 모양을 정의

ComponentDidMount : 컴포넌트를 생성후 첫 렌더링이 끝났을때 실행

 

 

2. 업데이트 ( Update )

컴포넌트가 업데이트 될 때 실행되는 메서드

GetDerivedStateFromProps / ShouldComponentUpdate / Render / GetSnapShotBeforeUpdate / ComponentDidUpdate

 

GetDerivedStateFromProps : props를 이용해 state 값을 얻을때 사용

ShouldComponentUpdate : 리렌더링을 할지 말지 결정하는 함수

- true를 반환하면 업데이트에 따른 리렌더링을 하고 false를 반환하면 리렌더링을 하지 않음

Render : 컴포넌트의 기능과 모양을 정의

GetSnapShotBeforeUpdate : 렌더링 결과가 DOM에 반영되기 직전에 호출

ComponentDidUpdate : 컴포넌트 업데이트가 끝난 리렌더링 후 호출

 

 

3. 언마운트 ( Unmount )

DOM에서 컴포넌트가 제거 되는것 

ComponentWillUnmount 

 

ComponentWillUnmount : 해당 컴포넌트가 제거되기 직전에 호출

 

 

👀 새로운 리액트 문서 사이트

https://react.dev/blog/2023/03/16/introducing-react-dev

Introducing react.dev – React

 

😚리액트의 클래스 방식과 함수 방식의 차이(feat. 애플코딩)

https://github.com/miseon920/class_function

GitHub - miseon920/class_function: 리액트의 클래스 방식과 함수 형식의 차이

++ 라이프 싸이클을 전부 외우기보다는 이해하는것이 이용하는대 편합니다.

++ class형식에 쓰였던 라이프 싸이클을 함수형에서는 useEffect 훅으로 대체한 것이다.

++ 이해가 안갔으나 이제 이해를 했다..!