React : 생명 주기(life cycle)

생성(mounting) -> 엽데이트(updating) -> 제거(unmounting) 의 생명주기를 갖는다. 

클래스 컴포넌트는 라이프 사이클 메서드를 사용, 함수형 컴포넌트는 Hook을 사용한다. 

 

 

Class Component 생명 주기

마운트

constructor : 컴포넌트 생성자 메서드, 컴포넌트 실행 시 가장 먼저 실행되는 메서드, this.props, this.state에 접근 가능하고 리액트 요소 반환

 

getDerivedStateFromProps : props로부터 파생된 state를 가져온다. 즉 props로 받아온 것을 state에 넣어주고 싶을 때 사용

 

render : 컴포넌트를 렌더링하는 메서드

 

componentDidMount : 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드.

 

업데이트

getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀌었을 때도 이 메서드가 호출된다. 

 

shouldComponentUpdate : 컴포넌트가 리렌더링 할 지 말 지를 결정하는 메서드이다.  > React.memo와 유사 

 

componentDidUpdate : 컴포넌트가 업데이트 된 후 발생 > 의존성 배열이 변할때만 useEffect 실행되는 것과 동일

 

언마운트

componentWillUnmount : 컴포넌트가 화면에 사라지기 전 호출 ...

 

Functional Component 생명 주기

리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수다. 

 

- 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눠져 컴포넌트를 함수 단위로 잘개 쪼갤 수 있음

- 라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로 인해 버그가 쉽게 발생하고 무결성 해침

 

규칙

• 최상위 에서만 Hook을 호출해야 한다
  • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
  • 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.
  • 일반 JS함수에서는 Hook을 호출해서는 안된다.

useState

상태를 관리합니다. [state이름, setter이름] 순으로 반환 받아서 사용합니다.

const [state, setState] = useState(initialState);

 

useEffect

화면에 렌더링이 완료된 후에 수행되며componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것

• ❗️만약 화면을 다 그리기 이전에 동기화 되어야 하는 경우에는,useLayoutEffect를 활용하여 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트 순으로 effect를 실행시킬 수 있다.

useEffect(() => {}); // 렌더링 결과가 실제 돔에 반영된 후마다 호출
useEffect(() => {}, []); // 컴포넌트가 처음 나타날때 한 번 호출
useEffect(() => {}, [의존성1, 의존성2, ..]); // 조건부 effect 발생, 의존성 중 하나가 변경된다면 effect는 항상 재생성됩니다.

useEffect안에서의 return은 정리 함수(clean-up)를 사용하기위해 쓰여집니다.

1. 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행
2. 컴포넌트가 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전 effect가 정리됩니다.

 

 useContext

Context API를 통해 만들어진 Context에서 제공하는 Value를 가져올 수 있다

const value = useContext(MyContext);

컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContext provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거 합니다.

 

useReducer

useState의 대체 함수로 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다.
컴포넌트 바깥에 로직을 작성할 수 도 있고, 심지어 다른 파일에 작성한 후 불러와서 사용할 수도 있습니다.
reducer란 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 입니다.

const [state, dispatch] = useReducer(reducer, initialArg, init);

 

useRef

특정 DOM 선택할때 주로 쓰이며 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됩니다.

const refContainer = useRef(null);

 

useMemo

메모이제이션된 값을 반환합니다. 이미 연산 된 값을 리렌더링 시 다시 계산하지 않도록 한다. 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 합니다. 의존성 배열이 없는 경우 매 렌더링 때마다 새 값을 계산합니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

useCallback

메모이제이션 된 콜백을 반환합니다. useMemo와 유사하게 이용되며 '함수'에 적용해줍니다.
의존성이 변경되었을때만 변경됩니다. 때문에 특정 함수를 새로 만들지 않고 재사용가능하게 합니다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

 

 

 

[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook