[react] JSX에서 라이프사이클, useReducer 사용하기

26 Dec 2023

react

React 애플리케이션을 개발할 때 JSX로 구성된 컴포넌트를 다루는 것은 중요한 부분입니다. 이번 블로그에서는 JSX에서 라이프사이클을 다루는 방법과 useReducer를 통한 상태 관리에 대해 알아보겠습니다.

라이프사이클 이해

React 컴포넌트는 라이프사이클 메서드를 사용하여 특정 시점에 코드를 실행할 수 있습니다. 예를 들어, 컴포넌트가 렌더링되기 전이나 후에 특정 작업을 수행할 수 있습니다.

라이프사이클 메서드 종류

componentDidMount: 컴포넌트가 마운트된 직후 호출됩니다.
componentDidUpdate: 컴포넌트의 업데이트가 일어난 직후 호출됩니다.
componentWillUnmount: 컴포넌트가 제거되기 직전 호출됩니다.

라이프사이클 메서드 사용

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 컴포넌트가 마운트된 직후에 실행할 작업
  }

  componentDidUpdate() {
    // 컴포넌트의 업데이트가 일어난 직후에 실행할 작업
  }

  componentWillUnmount() {
    // 컴포넌트가 제거되기 전에 실행할 작업
  }

  render() {
    return <div>My Component</div>;
  }
}

useReducer 사용하기

useReducer는 React의 훅 중 하나로, 복잡한 상태 로직을 간소화하고 가독성을 향상시킬 수 있습니다.

useReducer 예제

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

마치며

이번 포스트에서는 JSX에서 라이프사이클 메서드와 useReducer를 사용하여 상태를 관리하는 방법에 대해 알아보았습니다. 라이프사이클 메서드를 사용하여 컴포넌트의 특정 시점에 로직을 추가하고, useReducer를 사용하여 상태 관리를 보다 간편하게 할 수 있습니다.

더 많은 정보를 원하시면 아래 React 공식 문서를 참고해 주세요.

React 공식 문서: https://reactjs.org/docs/hooks-reference.html