11 Context API로 상태 관리하기: Props Drilling 문제 해결 및 전역 상태 공유 방법

 

1. Props Drilling 문제란?

React에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 하지만 컴포넌트의 깊이가 깊어질수록 props를 여러 단계에 걸쳐 전달해야 하는 문제가 발생하는데, 이를 Props Drilling 문제라고 합니다.

가. Props Drilling 문제 예제

import React, { useState } from "react";

function Parent() {
  const [user, setUser] = useState("홍길동");
  return <Child user={user} />;
}

function Child({ user }) {
  return <GrandChild user={user} />;
}

function GrandChild({ user }) {
  return <p>사용자 이름: {user}</p>;
}

export default Parent;

위 예제에서는 user 상태를 Parent 컴포넌트에서 생성했지만 GrandChild까지 전달하려면 Child를 거쳐야 합니다. 이런 방식은 컴포넌트 구조가 복잡해질수록 유지보수가 어려워지는 단점이 있습니다.

2. Context API를 활용한 전역 상태 공유

Context API를 사용하면 props를 단계별로 전달하지 않고도 원하는 컴포넌트에서 직접 접근할 수 있습니다.

나. Context API 기본 구조

import React, { createContext, useContext, useState } from "react";

// 1. Context 생성
const UserContext = createContext();

function App() {
  const [user, setUser] = useState("홍길동");
  return (
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  return <GrandChild />;
}

function GrandChild() {
  // 2. Context 사용
  const user = useContext(UserContext);
  return <p>사용자 이름: {user}</p>;
}

export default App;

다. Context API를 사용한 전역 상태 관리

위 코드에서는 UserContext를 생성한 후 UserContext.Provider를 통해 전역 상태를 공급합니다. 그리고 useContext(UserContext)를 사용하여 필요한 곳에서 상태를 직접 가져올 수 있습니다. 이를 통해 props를 여러 단계에 걸쳐 전달하지 않고도 데이터를 공유할 수 있습니다.

3. Context API와 Redux 비교

비교 항목Context APIRedux

사용 목적	전역 상태 공유	상태 관리 및 상태 변경 로직 분리
상태 업데이트	useState와 함께 사용	Reducer를 통해 변경
복잡성	간단함	설정이 필요함
성능	가벼움	중간 크기의 프로젝트에 적합

Context API는 간단한 전역 상태 공유에 적합하며, Redux는 상태 변화가 빈번한 대규모 애플리케이션에서 유용합니다.

4. 정리

Props Drilling 문제는 props를 깊게 전달해야 하는 경우 발생하며, 이를 해결하기 위해 Context API를 활용할 수 있습니다. useContext를 사용하면 원하는 컴포넌트에서 직접 전역 상태를 가져올 수 있어 코드가 간결해지고 유지보수가 쉬워집니다.

Context API는 비교적 간단한 프로젝트에서 전역 상태를 관리하는 데 적합하며, 프로젝트의 규모가 커질 경우 Redux 같은 상태 관리 라이브러리와 함께 사용하는 것이 좋습니다. 프로젝트의 복잡도에 맞는 적절한 상태 관리 방법을 선택하는 것이 중요합니다.

3 React 컴포넌트 개념: 함수형 컴포넌트와 클래스형 컴포넌트

 

React 컴포넌트란?

React에서 **컴포넌트(Component)**는 UI를 구성하는 가장 기본적인 단위입니다. 컴포넌트를 사용하면 코드의 재사용성을 높이고, 유지보수를 쉽게 할 수 있습니다. React는 **함수형 컴포넌트(Function Component)**와 클래스형 컴포넌트(Class Component) 두 가지 방식으로 컴포넌트를 정의할 수 있습니다.

함수형 컴포넌트와 클래스형 컴포넌트

1. 함수형 컴포넌트

함수형 컴포넌트는 JavaScript 함수 형태로 정의되는 컴포넌트입니다. React 16.8 이후부터는 React Hooks가 도입되면서 함수형 컴포넌트에서도 상태(state) 관리와 생명주기(lifecycle) 기능을 사용할 수 있게 되었습니다.

import React from 'react';

function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

export default Greeting;

위 코드에서 Greeting은 함수형 컴포넌트이며, props를 받아서 name 값을 출력하는 역할을 합니다.

2. 클래스형 컴포넌트

클래스형 컴포넌트는 class 문법을 사용하여 정의되며, React의 Component 클래스를 상속받아야 합니다. 클래스형 컴포넌트에서는 state를 사용할 수 있으며, 생명주기 메서드를 활용할 수 있습니다.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>안녕하세요, {this.props.name}님!</h1>;
  }
}

export default Greeting;

함수형 컴포넌트에 비해 클래스형 컴포넌트는 문법이 다소 복잡하지만, 상태(state) 관리나 생명주기 메서드가 필요할 때 사용됩니다. 그러나 React의 최신 트렌드는 함수형 컴포넌트 + Hooks를 활용하는 방식으로 변화하고 있습니다.

Props와 컴포넌트 재사용성

1. Props란?

**Props(프로퍼티)**는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 객체입니다. Props는 읽기 전용(immutable)이며, 자식 컴포넌트에서 직접 수정할 수 없습니다.

function UserProfile(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}</p>
    </div>
  );
}

function App() {
  return <UserProfile name="김철수" age={25} />;
}

위 코드에서 UserProfile 컴포넌트는 name과 age 값을 props로 전달받아 화면에 표시합니다.

2. 컴포넌트 재사용성

컴포넌트의 가장 큰 장점은 재사용성입니다. 같은 컴포넌트를 여러 곳에서 사용할 수 있으며, props를 활용하여 다양한 데이터를 표현할 수 있습니다.

function Button(props) {
  return <button style={{ backgroundColor: props.color }}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button color="blue" label="확인" />
      <Button color="red" label="취소" />
    </div>
  );
}

위 코드에서는 Button 컴포넌트를 색상과 텍스트만 변경하여 재사용하고 있습니다.

마무리

이번 장에서는 React 컴포넌트 개념, 함수형 컴포넌트와 클래스형 컴포넌트의 차이점, props와 컴포넌트 재사용성에 대해 알아보았습니다. React에서 컴포넌트는 재사용성과 유지보수성을 높이는 핵심 요소이므로, 이를 효과적으로 활용하는 것이 중요합니다.

다음 장에서는 React의 상태(state)와 생명주기(lifecycle) 메서드에 대해 알아보겠습니다.