u_ju
우주의 우당탕탕개발일지
u_ju
전체 방문자
오늘
어제
  • 분류 전체보기 (118)
    • 팀 프로젝트 (2)
    • 내배캠 WIL & TIL (91)
    • JS (0)
    • React (1)
    • CS (23)
    • Next (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 코딩#바보#오류투성이#팀프로젝트
  • 회의감#현타#나름뿌듯#고민거리#코딩#IT#CSS#JS
  • Component를 처음 선언하는 것을 Mount 라고 한다던데...?#props #state
  • 배열#함수
  • 일요일 오늘은 내가 바로 함수만들기 요리사 !

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
u_ju

우주의 우당탕탕개발일지

CS

리액트의 생명주기에 관하여

2023. 8. 7. 17:29

리액트의 라이프사이클은 컴포넌트가 생성되고 업데이트되며 소멸되는 과정을 단계적으로 설명하는 개념입니다. 리액트 라이프사이클은 클래스형 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 React Hook인 `useEffect`를 활용하여 비슷한 기능을 구현할 수 있습니다. React 16.3 이후부터는 라이프사이클 API가 변경되었으며, 아래는 React 16.3 이후의 라이프사이클 메서드들을 정리한 것입니다.

생명주기 메서드는 다음과 같이 세 가지 카테고리로 나눌 수 있습니다.

1. 마운트 (Mounting)
   - 컴포넌트가 생성되어 DOM에 삽입될 때의 단계입니다.
   - `constructor`: 컴포넌트가 생성될 때 호출되는 생성자 메서드입니다.
   - `static getDerivedStateFromProps`: props로부터 상태를 동기적으로 업데이트하는 메서드입니다. 리액트 17 버전 이후에는 권장하지 않으며, 대신 `componentDidUpdate`를 사용하는 것이 좋습니다.
   - `render`: 컴포넌트의 UI를 반환하는 메서드입니다.
   - `componentDidMount`: 컴포넌트가 DOM에 삽입된 직후에 호출되는 메서드입니다. API 호출이나 초기화 작업 등을 수행하기에 적합합니다.

2. 업데이트 (Updating)
   - 컴포넌트가 업데이트되는 단계입니다. props나 state가 변경될 때마다 호출됩니다.
   - `static getDerivedStateFromProps`: props로부터 상태를 동기적으로 업데이트하는 메서드입니다. 리액트 17 버전 이후에는 권장하지 않습니다.
   - `shouldComponentUpdate`: 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정하는 메서드입니다. 성능 최적화를 위해 사용합니다.
   - `render`: 컴포넌트의 UI를 반환하는 메서드입니다.
   - `getSnapshotBeforeUpdate`: 컴포넌트가 업데이트되기 직전에 호출되는 메서드로, DOM 상태를 캡처하는 데 사용합니다.
   - `componentDidUpdate`: 컴포넌트가 업데이트된 직후에 호출되는 메서드입니다. 이전 props와 state를 비교하여 변경 사항을 처리하는 데 사용됩니다.

3. 언마운트 (Unmounting)
   - 컴포넌트가 DOM에서 제거될 때의 단계입니다.
   - `componentWillUnmount`: 컴포넌트가 제거되기 직전에 호출되는 메서드입니다. 리소스 정리나 이벤트 해제 등을 수행하기에 적합합니다.

추가로 React 17 버전 이후에는 다음과 같은 라이프사이클 메서드들이 삭제되었습니다:
- `componentWillMount`
- `componentWillReceiveProps`
- `componentWillUpdate`

이 대신에 `getDerivedStateFromProps`와 `componentDidUpdate`를 사용하여 같은 작업을 수행할 수 있습니다. 또한 React 18에서는 라이프사이클 API가 변경될 수 있으므로, 해당 버전 이후의 변화에 주의해야 합니다.

'CS' 카테고리의 다른 글

스택과 큐의 차이점  (0) 2023.08.07
자주쓰는 색상을 React에서 관리하는 방법  (0) 2023.08.07
부모 자식간의 교류에 관하여.  (0) 2023.08.07
링크드 리스트에 관하여  (0) 2023.08.07
Redux 상태관리의 주요 개념들과 연결 관계  (0) 2023.04.07
    'CS' 카테고리의 다른 글
    • 스택과 큐의 차이점
    • 자주쓰는 색상을 React에서 관리하는 방법
    • 부모 자식간의 교류에 관하여.
    • 링크드 리스트에 관하여
    u_ju
    u_ju

    티스토리툴바