React 렌더 라이프사이클- 클래스형 컴포넌트와 함수형 컴포넌트

라이프사이클(생명주기)

모든 리액트 컴포넌트에서는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다.

라이프사이클 큰 흐름⬆️

 

클래스형 컴포넌트 생명주기

 

Mounting ➡️Updating ➡️ Unmounting

라이프사이클은 위와 같이 총 세가지 마운팅(생성), 업데이트, 언마운팅(제거)로 나뉜다.

[출처] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

흐름을 요약 하면 다음과 같다.

1. 컴포넌트가 만들어진다
2. constructor()이 실행: 초기화 수행
3. render()가 실행: 화면 렌더링 수행
4. ComponentDidMount() 실행: 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행된다.
   (조건부)
5. componentDidUpdate() 실행: 컴포넌트에 변화가 생기면 수행된다
6. componentWillUnmount()실행: 컴포넌트가 웹 브라우저 상에서 사라기 전에 호출된다.

1. 마운트

마운트는 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 말한다.

마운트할 때 호출하는 메서드 순서

여기서 getDrivedStateFromProps()는 잘 사용하지 않는 메서드이다.

constructor(): 컴포넌트 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다. 초기 state를 설정.

render() : this.props와 this.state에 접근 가능하며 리액트 요소를 반환한다. 여기서는 setState()를 사용할 수 없다.

componentDidMount(): 첫 렌더링을 다 마친 후 실행. 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업 처리.

 

2. 업데이트

컴포넌트는 다음의 경우 업데이트를 진행한다.

• props가 바뀌었을 때
• 부모 컴포넌트가 리렌더링 됐을 때
• state가 setState로 인해 바뀌었을 때
• this.forceUpdate로 강제로 렌더링이 됐을 때

componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후(리렌더링 후) 호출하는 메서드. 여기서 prevProps 또는 prevState를 사용해 컴포넌트가 이전에 가졌던 데이터에 접근 가능.

 

3. 언마운트

컴포넌트를 DOM에서 제거할 때 진행한다.

componentWillUnmount: 컴포넌트가 웹 브라우저 상 사라지기 전에 호출하는 메서드.

함수형 컴포넌트 생명주기

[출처] https://wavez.github.io/react-hooks-lifecycle/

생명주기 순서 흐름

1. 컴포넌트가 호출된다.
2. 컴포넌트 내부 함수 실행 => 초기화
3. return() 함수 실행: 화면 렌더링
4. useEffect() hook 실행: 첫 렌더링을 마친 후 실행
   (조건부)
5. useEffect() hook 실행: 의존성 배열에 따라 컴포넌트 변화를 지켜보고, 변화가 발생하면 실행.

배경지식으로 보면 좋은 렌더링/리렌더링

 

1. 마운팅

컴포넌트 호출이 됐을 때 컴포넌트 내부를 호출
컴포넌트에서 사용 할 state, 함수를 정의

const Example= ()=>{
    //호출되는 곳.
  return()
}

 

2. return()

JSX (Javascript 내에서 HTMl처럼 생긴 놈을 쓰게 해주는 것 )를 작성하는 곳으로 화면에 렌더링을 수행하는 함수.

• props와 state에 접근 가능.
• export default function TodoList() { const name = 'Gregorio Y. Zara'; const [check,setCheck]=useState(False) return ( <> <h1>{name}'s To Do List </h1> {Check ? 'Checked ': "not yet"} </> ); }

3.useEffect()

이 훅을 통해 마운팅, 업데이트, 언마운팅 처리가 가능하다.

• 리렌더링의 조건으로는 클래스 컴포넌트와 똑같이 state, props가 변경될 경우, 부모 컴포넌트가 리렌더링된 경우다.
• 한 개 또는 여러개 선언 가능
• useEffect(()=>{},[]): 렌더링 수행 후 단 한번 수행
• useEffect(()=>{},[변화를 지켜볼 값]): 컴포넌트 내 변화가 발생되면 호출하여 업데이트를 시킨다. 변화를 지켜볼 값에 변화가 일어나면 수행된다.
• useEffect(()=>{return()=>{'변화를 지켜볼 값'이 화면에서 사라질 때 }},[변화를 지켜볼 값]): 여기서 return은 클린업 함수라고 한다. 리렌더링 이후 업데이트 전에 실행된다. 자세한건

자세히 잘 정리된 블로그