React 렌더 라이프사이클- 클래스형 컴포넌트와 함수형 컴포넌트
라이프사이클(생명주기)
모든 리액트 컴포넌트에서는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다.
라이프사이클 큰 흐름⬆️
클래스형 컴포넌트 생명주기
Mounting ➡️Updating ➡️ Unmounting
라이프사이클은 위와 같이 총 세가지 마운팅(생성), 업데이트, 언마운팅(제거)로 나뉜다.
[출처] https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
흐름을 요약 하면 다음과 같다.
- 컴포넌트가 만들어진다
constructor()이 실행: 초기화 수행render()가 실행: 화면 렌더링 수행ComponentDidMount()실행: 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행된다.
(조건부)componentDidUpdate()실행: 컴포넌트에 변화가 생기면 수행된다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/
생명주기 순서 흐름
- 컴포넌트가 호출된다.
- 컴포넌트 내부 함수 실행 => 초기화
return()함수 실행: 화면 렌더링useEffect()hook 실행: 첫 렌더링을 마친 후 실행
(조건부)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은 클린업 함수라고 한다. 리렌더링 이후 업데이트 전에 실행된다. 자세한건