프론트엔드 면접 준비 : 리액트 생명 주기 메서드

리액트 컴포넌트는 컴포넌트에는 라이프사이클(LifeCycle) 즉, 컴포넌트의 생명주기가 존재하며

컴포넌트는 생성, 업데이트, 제거의 생명주기를 갖습니다.

 

1. 클래스 생명주기 메서드

리액트 컴포넌트의 생명주기 메서드는 컴포넌트가 생성되고, 업데이트되고, 사라지는 과정에서 호출되는 특별한 메서드입니다. 이 메서드들은 클래스 기반 컴포넌트에서 사용되며, 다음과 같은 세 가지 카테고리로 나눌 수 있습니다.

 

1. 마운트 (Mount): 컴포넌트가 DOM에 생성되고 웹 브라우저에 나타나는 단계입니다. 

 - constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드입니다.

 - getDerivedStateFromProps: props에서 값을 가져와 state에 넣을 때 사용하는 메서드입니다.

 - render: 준비한 UI를 렌더링하는 메서드입니다.

 - componentDidMount: 컴포넌트가 웹 브라우저에 나타난 후 호출되는 메서드로, 초기화 작업이나 데이터 로딩에 적합합니다.

 

2. 업데이트 (Update): 컴포넌트가 다음 4가지 경우에 업데이트됩니다

 - props가 바뀔 때

 - state가 바뀔 때

 - 부모 컴포넌트가 리렌더링될 때

 - this.forceUpdate로 강제로 렌더링을 트리거할 때

 

업데이트에 호출되는 메서드

• getDerivedStateFromProps: props 변화에 따라 state 값을 업데이트할 때 사용합니다.
• shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정합니다.
• render: 컴포넌트를 리렌더링합니다.
• getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 직전에 호출됩니다.
• componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출됩니다.

3. 언마운트 (Unmount): 컴포넌트를 DOM에서 제거하는 단계입니다.

• componentWillUnmount: 컴포넌트가 웹 브라우저에서 사라지기 전에 호출되는 메서드로, 리소스 해제나 정리 작업에 사용됩니다.

2. 함수 생명주기(feat. 리액트 Hooks)

리액트 Hooks는 리액트 v16.8에서 새롭게 도입된 기능입니다.

이전에는 클래스형 컴포넌트에서만 상태 관리와 라이프사이클 관리 기능을 사용할 수 있었습니다. 

하지만 Hooks를 사용하면 함수형 컴포넌트에서도 이러한 기능을 쉽게 활용할 수 있습니다.

 

Hooks의 등장배경

1. 클래스형 컴포넌트의 단점:

• 클래스형 컴포넌트는 자바스크립트의 this 동작이 다른 언어와 다르며, super() 호출 등의 규칙을 따라야 합니다.
• 클래스형 컴포넌트에서 발생하는 this 바인딩 문제와 복잡한 상속 구조로 인해 유지보수가 어려워집니다.
• 이러한 단점을 해결하고자 함수형 컴포넌트에서도 상태와 라이프사이클 메서드를 사용할 수 있는 방법을 모색했습니다.

2. Hooks의 등장:

• Hooks는 함수형 컴포넌트에서도 상태 관리와 라이프사이클 메서드를 사용할 수 있도록 해줍니다.
• useState를 통해 상태를 관리하고, useEffect를 통해 라이프사이클 메서드를 흉내 낼 수 있습니다.
• 이를 통해 코드를 간결하게 작성하고, 클래스형 컴포넌트의 단점을 극복할 수 있습니다.

Hooks의 종류

1. useState: 가장 기본적인 Hook으로, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 예를 들어 숫자 카운터를 구현할 때 사용합니다.

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      <p>현재 카운터 값은 <b>{value}</b>입니다.</p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

 

2. useEffect: 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하는 Hook입니다componentDidMount와 componentDidUpdate를 합친 형태로 볼 수 있습니다.

import React, { useState, useEffect } from 'react';

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');

  useEffect(() => {
    // 렌더링 후 작업 설정
  }, []); // 빈 배열은 처음 렌더링 시에만 호출

  // ...
};

 

이 외에도 다양한 Hooks 이 존재하므로 공부하여 프로젝트에 직접사용 및 활용하면 좋을 것 같습니다.