라이프사이클(클래스형 vs 함수형), react hooks

LifeCycle Method

LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부른다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 이다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다.

생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있다.

render( ) 함수

컴포넌트 모양새를 정의, 컴포넌트에서 가장 중요한 메서드,  라이프사이클 메서드 중 유일한 필수 메서드

this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환

constructor 메서드

constructor(props) { ... }

이것은 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행, 이 메서드에서는 초기 state를 정할 수 있음

getDerivedStateFromProps 메서드

이것은 리액트 v16.3 이후에 새로 만든 라이프사이클 메서드, props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트될 때 호출

static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.value != = prevState.value) { // 조건에 따라 특정 값 동기화
      return { value: nextProps.value };
    }
    return null; // state를 변경할 필요가 없다면 null을 반환

componentDidMount 메서드

componentDidMount() { ... }

컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행 이 안에서 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 됨.

shouldComponentUpdate 메서드

shouldComponentUpdate(nextProps, nextState) { ... }

props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드, 이 메서드에서는 반드시 true 값 또는 false 값을 반환해야 함.

getSnapshotBeforeUpdate 메서드

 render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출 , 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용(예: 스크롤바 위치 유지).

getSnapshotBeforeUpdate(prevProps, prevState) {
    if(prevState.array != = this.state.array) {
    const { scrollTop, scrollHeight } = this.list
      return { scrollTop, scrollHeight };
    }

componentDidUpdate 메서드

componentDidUpdate(prevProps, prevState, snapshot) { ... }

리렌더링을 완료한 후 실행, 업데이트가 끝난 직후이므로, DOM 관련 처리를 해도 무방

componentWillUnmount 메서드

componentWillUnmount() { ... }

컴포넌트를 DOM에서 제거할 때 실행

componentDidCatch 메서드

컴포넌트 렌더링 도중에 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여 줄 수 있게 해 줌

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

---

Hooks

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

 

useState

useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다.

useEffect

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

useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 한다.

useMemo

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

useCallback

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

useRef

useRef Hook은 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 준다.

이외에 다른 개발자가 만든 다양한 Hooks 리스트

https://nikgraf.github.io/react-hooks/

Collection of React Hooks

커스텀 Hooks 만들어서 사용가능

여러 컴포넌트에서 비슷한 기능을 공유할 경우, 이를 자신만의 Hook으로 작성하여 로직을 재사용할 수 있다.

 

출처 및 참고자료

리액트를 다루는 기술[개정판] - 김민준

https://react.vlpt.us/basic/25-lifecycle.html

25. LifeCycle Method · GitBook