[React]라이프사이클 알아보기

React 라이프사이클이란

• React는 컴포넌트 기반의 VIEW 를 중심으로 한 라이브러리입니다. React는 프레임워크 가 아닌 라이브러리 입니다!
  그래서 각각의 컴포넌트에는 라이프사이클(LifeCycle), 즉 컴포넌트의 수명 주기 가 존재하는데 이 생명 주기는
  컴포넌트가 렌더링 되기 전인 준비과정에서 시작해서 페이지에서 사라질 때 끝나게 됩니다.
  참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하며 함수형 컴포넌트에서는 사용할 수 없습니다.
  다만 React가 업데이트 되면서 Hooks 이 생기면서 함수형 컴포넌트에서도 라이프사이클과 비슷한 작업을 처리할 수 있게 됬습니다.

---

React 라이프사이클

• 컴포넌트 라이프사이클은 총 9가지로 나눌 수 있는데, 이 9가지들을 크게 3가지의 카테고리 분류별로 나눌 수 있습니다.

• 3개의 카테고리들은 위의 이미지와 같이 마운트, 업데이트, 언마운트 입니다. 각각의 카테고리의 상황에 따라
  호출하는 라이프사이클 메서드가 있는데 해당 메서드들은 특정 상황에서만 호출 될 때도 있고, 여러 상황에서 호출되는 경우도 있습니다.

---

 이미지 출처 : Kyun2da.dev

• 위의 이미지를 보면 마운트(생성 될 때)할 때와 업데이트 할 때 동일한 메서드를 호출하는 경우도 있고 각각의 상황에 따라
  특정한 메서드를 메서드를 호출하는 경우도 있습니다.
  각각의 카테고리 별 상황과 9가지 메서드의 종류를 알아보겠습니다.

카테고리 종류

마운트

• 마운트(Mount) 는 DOM이 생성되고 웹 브라우저상에 나타나는 것을 말합니다.
  이 때 호출하는 메서드는 총 4가지 입니다.
  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount

업데이트

• 업데이트(Update)는 말 그대로 컴포넌트가 특정 상황에 의해 업데이트 되는 것을 말합니다.
  업데이트가 되는 상황들은 아래와 같습니다.
  • props 가 바뀔 때
  • state 가 바뀔 때
  • 부모 컴포넌트가 리렌더링 될 때
  • this.forceUpdate로 강제로 렌더링을 트리거 할 때
• 이렇게 4가지의 특정 상황일 때 컴포넌트는 업데이트 되며 아래와 같은 메서드를 호출합니다.
  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpdate

언마운트

• 언마운트(Unmount) 는 말 그대로 마운트의 반대 과정이며, 컴포넌트를 DOM에서 제거하는 것을 말합니다.
  언마운트 시 호출되는 메서드는 1가지만 존재합니다.
  • componentWillUnmount

---

라이프사이클 9가지 메서드

constructor

• constructor(생성자)은 컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메서드입니다.
  이 메서드에서는 초기 state 를 설정 할 수 있습니다.
  Hooks에서는 useState을 통해 초기 state값을 설정 합니다.

    // 클래스형 컴포넌트
    class App extened Component {
        constructor(props) {
            super(props);
            this.state = { count : 0};
        }
    }

    // 함수형 컴포넌트
    const App = () => {
        const [count, setCount] = useState(0);
    }

render

• render 는 클래스형 컴포넌트에서 가장 중요하기도 하고, 라이프사이클 메서드 중 유일한 필수 메서드 입니다.
  render 메서드 안에서 this.props 와 this.state 에 접근할 수 있으며 React 요소를 반환합니다.
  해당 메서드를 통해 div 같은 요소나 따로 선언한 컴포넌트를 반환할 수 있으며 null 이나 false 를 통해 아무것도 보여주지 않을 수 있습니다.
  함수형 컴포넌트에서는 render를 통하지 않고 컴포넌트를 렌더링 할 수 있습니다.

getDerivedStateFromProps

• getDerivedStateFromProps메서드는 React v16.3 이후에 생긴 메서드입니다. 해당 메서드는 props로 받아 온 값을 state에 동기화 시키는 용도로 사용하며,
  컴포넌트가 마운트 될 때와 업데이트 될 때 호출되는 메서드 입니다.

    // 클래스형 컴포넌트
    class App extends Component {
        static gerDerivedStateFromProps(nextProps, prevState) {
            if ( nextProps.value !== prevstate.value) { 
                // 조건에 따라 특정 값 동기화
                return { value : nextprops.value };
            }
            return null;
            // state를 변경 할 필요가 없다면 null 을 반환 
        }
    }

componentDidMount

• componentDidMount 메서드는 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행되는 메서드 입니다.
  해당 메서드 안에서 다른 JavaScript library 또는 프레임워크 함수를 호출하거나 이벤트 등록, setTimeout, setinterval, 네트워크 요청 같은 비동기 작업을 처리하면 됩니다.
  함수형 컴포넌트에서는 useEffect 를 활용하여 componentDidMount 와 같이 구현할 수 있습니다.

    // 클래스형 컴포넌드
    class App extends Component {
        componentDidMount() {

            ...
        }
    }

    // 함수형 컴포넌트
    const App = () => {
        useEffect(() => {
            ...
        },[]);
    }

componentDidUpdate

• componentDidUpdate 메서드는 리렌더링으 완료한 후 실행되는 메서드 입니다. 업데이트가 끝 난 직후이므로, DOM 관련 처리를 해도 무방합니다.
  또 한 여기서는 prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근 할 수 있습니다.
  또 getSnapshotBeforeUpdate 에서 반환한 값이 있다면 여기서 snapshot 값을 전달 받을 수 있습니다.

    // 클래스형 컴포넌트
    class App extends React.Component {
        componentDidUpdate(prevProps, prevState) {
            ...
        }
    }

    // 함수형 컴포넌트
    const App = () => {
        useEffect(() => {
            ...
        });
    }

shouldComponentUpdate

• shouldComponentUpdate 메서드는 stata 또는 props를 변경했을 때 리렌더링을 시작힐지 여부를 지정하는 메서드 입니다.
  해당 메서드의 경우 반드시 true 나 false 를 반환해줘야 합니다. 컴포넌트를 만들 때 이 메서드를 따로 생성하지 않으면 default값으로 항상 true 를 반환합니다.
  만약 shouldComponentUpdate메서드가 false 값을 반환한다면 업데이트 과정은 이 부분에서 중지됩니다.
  해당 메서드는 성능 최적화만을 위한 것이며 렌더링 목적을 방지하는 목적으로 사용 할 경우 버그로 이어질 수 있으므로 주의가 필요합니다.

getSnapshoBeforeUpdate

• getSnapshoBeforeUpdate 메서드는 React v16.3 이후에 생겨난 메서드 입니다. 해당 메서드는 render 에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출됩니다. getSnapshoBeforeUpdate 메서드에서 반환하는 값은 componenteDidUpdate에서 세 번째 파라미터인 snapshot 값으로 전달받을 수 있습니다.
  즉 주로 업데이트 하기 직전의 값을 참고할 일이 있을 때 활용됩니다.
  (예: 스크롤바 위치 유지, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등)

    class App extends React.Component {
        getSnapshoBeforeUpdate(prevProps, prevState) {
            if (prevProps.list.length < this.props.list.length) {
                const list = this.listRef.current
                return list.scrollHeight - list.scrollTop
            }
            return null;
        }
    }

• 현재 함수형에서는 이 기능을 대체할만이 Hooks 이 없다고 알려져 있습니다.

componentWillUnmount

• componentWillUnmount 메서드는 컴포넌트를 DOM에서 제거할 때 실행되는 메서드 입니다.
  만약 componentDidMount 에서 등록한 이벤트가 있다면 ComponentWillUnmount 에서 제거 작업을 해야합니다.
  함수형 컴포넌트에서는 useEffect CleanIp 함수를 통해서 해당 메서드를 구현할 수 있습니다.

    // 클래스형 컴포는트
    class App extends React.Component {
        componentWillUnmiunt() {
            ...
        }
    }

    // 함수형 컴포넌트
    const App = () => {
        useEffect(() => {
            return () => {
                ...
            }
        },[]);
    }

componentDidCatch

• componentDidCatch 메서드는 React v16 에서 도입된 메서드이며, 컴포넌트 렌더링 도중에 Error가 발생했을 때
  애플리케이션이 멈추지 않고 오류 UI를 보여줄 수 있게 해주는 메서드 입니다.

    componentDidCatch(error, info) {
        this.setState({
            error: true
        });
        console.log((error, info));
    }

• 위의 Smaple 코드에서 error 는 파라미터에 어떤 에러가 발생했는지 알려주며, info 파라미터는 어디에 있는 코드에서 Error가 발생했는지 정보를 줍니다.
  다만 이 메서드를 사용할 떄는 컴포넌트 자신에게 발생하는 Error는 잡아낼 수 없고 자신의 this.props.children 으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있습니다.