React의 모든 컴포넌트는 아래의 세가지 단계를 거칩니다 .
각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하며 각 단계 속에서 호출되는 메서드들을 생명주기 메서드 라고 합니다
리액트는 웹에서 UI데이터가 변경되면 자동으로 컴포넌트가 업데이트되며 동적으로 화면을 그려줍니다.
제대로 된 기능을 수행하려면 이런 자동으로 업데이트되는 과정에 끼어들어 API를 호출하기도 하고 데이터를 가공하기도 해야 합니다.
따라서 생명주기의 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재합니다.
리액트에서의 생명주기 과정입니다 .
초기화 단계
업데이트 단계
소멸단계
Class형과 함수형의 생명주기 차이점
왜 ?
함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능 하기 때문입니다 .
클래스형 컴포넌트 | 함수형 컴포넌트 | |
---|---|---|
특징 | render() 메소드와 Component 상속 필수 | 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook사용 |
단점 | state, props 사용 불편 많은 메모리 사용 | state와 생명주기 메소드를 별도로 구현해야함 ex) useStatem useEffect 사용 |
useEffect
: React Hook에서 라이프사이클 구현에 사용되는 함수
useEffect 쓰는법
useEffect(() => {
//코드 적는곳
})
=> 2번째 파라미터를 주지 않으면 모든 컴포넌트가 리렌더링될 때마다 실행(메모리 과다 사용)
useEffect(() => {
// 코드 적는곳
}, []) //빈배열을 줌으로써 마운트 이후 1회만 실행
=> 마운트 이후 1회만 실행
위 함수 대신에 쓸 때에
useEffect(() => {
// 코드 적는곳
}, [props명, state명, ...])
=> 2번째 파라미터 배열에 명시한 변수가 변경될 때만 실행
useEffect(() => {
// 코드 적는 곳
return () => {
// unmount나 unsubscribe 코드
}
}, [props명, state명, ...])
=> effect(함수 혹은 변수 등)가 필요없어지면 return 함수 실행하여 메모리 반환 (언마운트 혹은 구독 취소 시에 사용)
이렇게 오늘은 react의 생명 주기와
class형과 함수형의 생명주기의 차이점을 작성해 보았습니다