라이프 사이클이란?

컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.

위의 이미지는 리액트의 라이프 사이클을 나타낸 화면이다

라이프사이클의 분류

-라이프 사이클은 위 그림과 같이 총 9개가 존재한다.
크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다.
-여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.

-업데이트는4가지 상황에서 발생한다.

1.props가 바뀔 때
2.state가 바뀔 때
3.부모 컴포넌트가 리렌더링 될 때
4.this.forceUpdate로 강제로 렌더링을 트리거할 때

Mount

1.constructor()

-페이지 로드 되고 컴포넌트가 처음 만들어질때 실행할 코드들을 작성한다.
-초기설정 및 State를 정할때 사용한다.
-클래스형에서는 초기 state를 정할 때 constructor를 사용해야한다.
-훅에서는 useState hook을 사용하면 초기 상태를 쉽게 설정해줄 수 있다.

2.static getDerivedStateFromProps(nextProps, prevState)

-리턴타입으로 Javascript Object를 주어야 한다.
-리턴된 Object는 State에 반영된다
-props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌 트가 마운트될 때와 업데이트 될 때 호출된다.

3.render()

-이 메서드는 React Component라면 필수로 가지고 있는 메서드이다.
-이 메서드에는 상태를 변경한다던가 하는 Side Effect가 있으면 안된다고 한다.

4.componentDidMount()

-컴포넌트가 DOM에 추가 된 후 실행된다.
-DOM과 상호작용하거나 서드파티 라이브러리들을 사용하는 코드들을 여기서 작성한다.
-함수형 Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다.

Update

1.static getDerivedStateFromProps

Mount단계 와 동일하다.

2.shouldComponentUpdate

-리턴타입으로 True, False를 주어야 하며 리턴 되는 결과에 따라 DOM에 리 렌더링을 여부를 결정한다.
-성능개선하기 위해 사용이 가능하다 한다.

3.render()

Mount단계 와 동일하다.

4.getSnapshotBeforeUpdate

-Virtual DOM이 실제 DOM에 반영되기 직전에 실행된다.
-이 메서드에선 이전과 현재의 props와 state를 접근가능하다.
-return으로 넘겨진 값은 componentDidUpdate의 3번째 인자로 전달된다.

5.componentDidUpdate

-Mount와 거의 동일하다.
-매 업데이트마다 UI sync와 서드파티 라이브러리를 사용하는 코드 작성

UnMount

1.ComponentWillUnMount

-이 메서드는 DOM에서 컴포넌트가 지워질때 실행된다.
-컴포넌트와 관련된것들을 정리하는데 사용한다.
-예를 들어 로그아웃시 주 구성 Component를 해제하기전에 사용자 세부정보와 모든 인증 토큰을 지운다거나 setInterval을 clear한다거나 할 수 있다.

클래스형 컴포넌트

클래스형 작성하는 법

클래스형 컴포넌트에서는 render() 함수를 이용하여, UI를 구성할 JSX 코드를 반환해주는 형식으로 구성되어야 합니다.

함수형 컴포넌트

함수형 작성하는 법

확실히 클래스형 컴포넌트보다는 간결하게 코드를 작성할 수 있습니다.

리액트 Hooks

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는 짱짱👍👍.

1. useState

-useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.
-만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook 을 사용하면 굿굿👏👏

2. useEffect

-useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 이다.
-클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태와 비슷하다.

3. useContext

-이 Hook을 사용하면 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있다.

4. useReducer

-useReducer는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 훌륭한 Hook이다.

5. useMemo

-useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

6. useCallback

-useCallback 은 useMemo와 상당히 비슷한 함수이다.
-주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다.
-이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 다네😎

7. useRef

-useRef Hook 은 함수형 컴포넌트에서 ref 를 쉽게 사용 할 수 있게 해주는 짱짱맨👍👍

등이 있다 나머지는 구글링하면서 공부하먄서 적어가야겠당...😜😜