State LifeCycle

State

state는 말 그대로 상태이다. 즉 컴포넌트의 랜더링의 결과에 영향을 준다. props도 컴포 컴포넌트의 결과에 영향을 준다. 여기서 props와 state의 차이점은 state는 컴포넌트 내부에서 관리된다. 즉, 함수 내에서 선언된 변수처럼 사용되어 진다.

functional components에서 state를 쓰는 법을 알아보자

import React, {useState} from 'react';

const Say = () => {
    const [message, setMessage] = useState('초기값');
    const onClickEnter = () => setMessage('안녕!');
    const onClickLeave = () => setMessage('잘가!');

    const [color, setColor] = useState('black');

    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style=>{message}</h1>
            <button style= onClick={()=>setColor('red')}>RED</button>
        </div>
    );
};

export default Say;

구조분해할당을 통해서 useState에서 값을 담당하는 message와 값을 변경하는 setMessage를 할당해주고 있다. 또 useState의 ()에 초기값이라는 문자타입으로 message에 초기값을 할당해준다. 그리고 함수들을 통해서 setMessage를 실행시켜 값들을 변경해 주고 있다. 이처럼 functional components애서는 useState를 통해서 state를 사용하고 관리해 줄 수 있다.

---

Life Cycle

Life Cycle은 react의 컴포넌트의 생명주기를 의미한다. 생명주기란 react 컴포넌트가 DOM에 그려지고 없어지는 과정을 말한다. 이런 생명주기들은 컴포넌트가 만들어 질 때, 업데이트 될 때, 사라질 때 등 순간마다 실행되는 메서드들이 있다.

MOUNT

1.constructor()
페이지 로드 되고 컴포넌트가 처음 만들어질때 실행할 코드들을 작성한다.
초기설정 및 State를 정할때 사용한다.

2. static getDerivedStateFromProps
   페이지 로드 되고 컴포넌트가 처음 만들어질때 실행할 코드들을 작성한다.
   초기설정 및 State를 정할때 사용한다.

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

4. componentDidMount()
   컴포넌트가 DOM에 추가 된 후 실행된다.
   DOM과 상호작용하거나 서드파티 라이브러리들을 사용하는 코드들을 여기서 작성한다.

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한다거나 할 수 있다.