[React] React의 생명주기 (LifeCycle) 이해하기

Class Component

• 더 이상 주류는 아니다.
• 그러나 함수 컴포넌트와 hook을 같이 쓰는 것이 주류가 되기 이전에는 클래스 컴포넌트만 사용했고 그만큼 리액트의 동작 원리를 이해하는데 도움을 준다
• 추후 입사한 회사에서 클래스 컴포넌트를 사용할 수 있는데, 그 때 코드를 읽고 분석할 줄 알아야 한다.

자세히 보기: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mount

1. constructor (생성자)

• 컴포넌트를 만들 때 처음으로 실행되며 초기 state를 정할 수 있다

// class
class Example extends React.component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
}

// Hooks
const Example = () => {
    const [count, setCount] = useState(0);
}

2. getDerivedStateFromProps

• props로 받아온 값을 state를 넣어주고 싶을 때 사용
• 컴포넌트가 마운트될 때와 업데이트 될 때 호출된다 (= 컴포넌트가 처음 렌더링 되기 전에도, 리렌더링 되기 전에도 매번 실행)
• 다른 생명주기 메서드와 다르게 static을 필요로 하고 이 안에서는 this를 조회할 수 없다
• 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설정이 되고, null을 반환하면 아무 일이 발생하지 않는다

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
 }

3. render

• 컴포넌트를 렌더링할 때 필요한 메서드 (필수 메서드)
• 함수형 컴포넌트에서는 render를 쓰지 않고 컴포넌트를 렌더링할 수 있다.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

4. componendDidMount

• 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드
• 이 메서드가 호출되는 시점에 우리가 만든 컴포넌트가 화면에 나타난 상태이다
• DOM을 사용해야 하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch를 통하여 ajax 요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 한다

 

Update

1. getDerivedStateFromProps

• 컴포넌트의 props나 state가 바뀌었을 때도 호출된다

2. shouldComponentUpdate

• 컴포넌트가 리렌더링 할지 말지 결정하는 메서드
• 주로 최적화할 때 사용한다

3. render

4. getSnapshotBeforeUpdate

• 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate 함수에서 받아와서 사용
• 사용되는 일이 그렇게 많지 않아서 그냥 알아만 두는 것
• 함수영 컴포넌트와 Hook을 사용할 때는 대체할 수 있는 기능이 아직 없다
• DOM에 변화가 반영되기 직전에 DOM의 속성을 확인하고 싶을 때 이 메서드를 사용하면 된다

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    if (prevProps.color !== this.props.color) {
      return this.myRef.style.color;
    }
    return null;
  }

5. componentDidUpdate

• 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드
• 3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회 할 수 있다

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate", prevProps, prevState);
    if (snapshot) {
      console.log("업데이트 되기 직전 색상: ", snapshot);
    }
  }

 

Unmount

componentWillUnmount

• 컴포넌트가 화면에서 사라지기 직전에 호출
• DOM에 직접 등록했었던 이벤트 제거

 

 

---

 

 

Functional Component

• state 사용 불가
• 생명주기 함수 없음
• Hook을 이용해서 state와 생명주기함수 기능을 대체한다

Hook

• class 없이 React를 사용할 수 있게 한다
• 최상위에서만 호출해야 한다
• 반복문, 조건문, 중첩함수 내에서 실행 X ⇒ 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 hook이 호출되는 걸 보장
• 리액트 함수 컴포넌트에서만 호출해야 한다 (JS 함수에서 호출 X)

useState

• 상태관리
• state를 사용하게 위한 hook

import React, { useStae } from 'react';

function Counter(props) {
    var [count, setCount] = useState(0);

    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}> 클릭 </button>
        </div>
    );
}

useEffect

• side Effect를 수행하기 위한 hook
  • side effect : 다른 컴포넌트에 영향을 미칠 수 없고 렌더링 중에는 작업이 완료될 수 없어서 effect이라 부른다
• componendDidMount + componentDidUpdate + componentWillUnMount ⇒ 세 가지가 합쳐진 것

useEffect(effect 함수, 의존성 배열);

• 배열이 하나라도 변경되었을 때 이펙트 함수 사용
• 의존성 배열을 생략하면 컴포넌트가 업데이트 될때마다 호출된다

useRef

• reference를 사용하기 위한 hook
• reference : 특정 컴포넌트에 접근할 수 있는 객체
• 변경가능한 current라는 걸 가진 하나의 상자와 같다.
• 내부의 데이터가 변경되었을 때 별도로 알리지 않는다 (재렌더링 x)
• dom 내부의 변경을 알려면 Callback ref를 사용해야 한다
• 특정 DOM을 선택할 때 쓰인다
• .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환

useMemo

• Memoized value를 리턴하는 hook
• Memoization : 연산량이 많은 함수를 저장했다가 호출되면 바로 호출하는 것 (최적화 관련)
• 렌더링 중에 실행되는 함수는 useMemo()에 넣으면 안된다.
• 의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행된다 (아무 의미 없음)
• 의존성 배열이 빈 배열인 경우, 컴포넌트 마운트 시에만 호출된다 (마운트 이후에는 값 변경 x)

const memoizedValue = useMemo(
    () => {
            // 연산량이 높은 작업을 수행하여 결과를 반환
            return computeExpensiveValue(의존성 변수1, 의존성 변수2);
    },
    [의존성 변수1, 의존성 변수2]
);

useCallback

• useMemo와 유사하지만 값이 아닌 함수를 반환
• 의존성 배열의 값이 바뀌는 경우에만 함수를 새로 정의해서 return 해주는 것

 

 

 

 

 

 

---

참조

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

https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0

 

 

리액트 생명주기에 대해 이해도가 조금...생긴것 같다ㅎ