📝새로 배운 개념

개념

이번에 알게 된 개념의 특징을 정리해보세요.

• props drilling 정보
  • Props Drilling은 React에서 상위 컴포넌트의 props를 하위 컴포넌트로 전달하는 프로세스를 말합니다. 이는 다수의 중첩된 컴포넌트를 통해 데이터를 전달할 필요가 있을 때 사용됩니다.
• props drilling 문제점
  • Props Drilling은 컴포넌트 계층이 깊어질수록 유지보수가 어려워지고 코드의 가독성이 떨어질 수 있습니다. 각 컴포넌트가 상위 컴포넌트에서 필요로 하는 데이터만을 전달받게 되므로, 불필요한 props가 중첩되어 전달될 수 있습니다.

// ParentComponent.jsx
function ParentComponent(props) {
return <ChildComponent data={props.data} />;
}

// ChildComponent.jsx
function ChildComponent(props) {
return <GrandChildComponent data={props.data} />;
}

// GrandChildComponent.jsx
function GrandChildComponent(props) {
return <div>{props.data}</div>;
}

• Context Api
  • Context API란?
    • React의 Context API는 컴포넌트 트리 전반에 걸쳐 데이터를 효율적으로 공유할 수 있는 방법을 제공합니다. 특히 로그인한 사용자, 테마, 선호 언어 등과 같은 전역 데이터를 여러 컴포넌트에 걸쳐 쉽게 접근할 수 있게 해 줍니다.
  • 사용 방법
  • Context를 사용하기 위해서는 먼저 **React.createContext()**를 호출하여 Context 객체를 생성해야 합니다. 이 객체는 Provider와 Consumer 컴포넌트를 포함하고 있습니다.

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

const ThemeContext = React.createContext('light');

function App() {
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={theme}>
            <Toolbar changeTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')} />
        </ThemeContext.Provider>
    );
}

function Toolbar(props) {
    return (
        <div>
            <ThemedButton changeTheme={props.changeTheme} />
        </div>
    );
}

function ThemedButton(props) {
    const theme = useContext(ThemeContext);
    return (
        <button
            style={{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}
            onClick={props.changeTheme}>
            Change Theme
        </button>
    );
}

• Recoil을 이용한 상태 관리

  • Recoil이란?
    • Recoil은 React 앱의 상태 관리를 위한 라이브러리로, 복잡한 컴포넌트 계층 구조 없이도 상태를 전역적으로 관리할 수 있는 툴을 제공합니다. 간결하고 기능적인 API를 제공하여 개발자가 더 적은 코드로 더 많은 일을 할 수 있도록 돕습니다.
  • 기본 개념
    • Recoil의 주요 개념에는 **atoms**와 selectors 두 가지가 있습니다.
  • Atoms
    • Atoms는 상태의 일부를 나타내는 단위로, 업데이트와 구독이 가능합니다. Atom의 상태가 변경되면 그 Atom을 구독하는 모든 컴포넌트가 리렌더링됩니다.
  • Selectors
    • Selectors는 파생된 상태(derived state)의 일부를 나타냅니다. 기존의 상태를 입력으로 받아 새로운 데이터를 생성합니다.

• Jotai란?

  • Jotai는 React 앱의 상태 관리를 위한 프리미티브하고, 효율적인 라이브러리입니다. 작은 규모의 API와 함께 제공되며, Atom 개념을 중심으로 작동합니다. 이를 통해 애플리케이션의 상태를 전역적으로, 또는 로컬적으로 관리할 수 있습니다.
  • Atoms
    • Atom은 상태의 일부를 나타내며, 어디서든지 읽거나 쓸 수 있습니다. Atom의 변화는 그것을 사용하는 모든 컴포넌트에 영향을 미칩니다.

장단점

Context API

장점:

• React에서 공식 지원.
• 사용 및 통합이 간단함.
• 추가적인 라이브러리 필요 없음.

단점:

• 복잡한 상태 관리는 어려움.
• 비동기 상태 관리 지원 부족.
• 성능 최적화를 위해 메모이제이션 필요.

Jotai

장점:

• 원자적 상태 관리로 복잡한 상태도 쉽게 처리 가능.
• 비동기 상태 관리 지원.
• 보일러플레이트 코드가 적음.

단점:

• 공식 지원이 아닌 커뮤니티 지원.
• 학습 곡선이 조금 있음.

Recoil

장점:

• 복잡한 상태 그래프 관리에 강력함.
• 비동기 상태 관리 내장 지원.
• 셀렉터 기능으로 효율적인 상태 관리 가능.

단점:

• 공식 지원이 아닌 커뮤니티 지원.
• 비교적 보일러플레이트 코드가 많음.
• 다른 상태 관리 라이브러리에 비해 크기가 큼.

✨느낀 점&자기 선언

학습하며 깨달은 점들을 정리해보세요. 단순히 느낀 점도 좋고, 더 궁금한 점이나 부족한 점도 좋아요. 학습한 내용을 바탕으로 어떻게 개선할지가 중요하니까요. 오늘의 피드백으로 내일 더 성장해봐요.

🦋활용 사례

활발한 사용 분야

1. Context API
   • 주요 사용 케이스:
     • 테마, 로컬라이제이션, 사용자 세션 등 애플리케이션 전반에 걸쳐서 사용되는 전역 데이터 관리에 적합.
     • 중간 크기의 프로젝트에서 효과적으로 사용할 수 있으며, 별도의 라이브러리 설치 없이 React 내부적으로 지원됩니다.
2. Recoil
   • 주요 사용 케이스:
     • 대규모 애플리케이션의 상태를 효율적으로 관리하고 싶을 때.
     • 컴포넌트의 상태가 다른 컴포넌트의 상태에 의존하는 복잡한 상태 로직을 갖는 경우.
3. Jotai
   • 주요 사용 케이스:
     • 프로젝트의 초기 단계에서 간단하고 빠른 상태 관리가 필요할 때.
     • 상태 로직을 간결하게 유지하면서도 효율적으로 상태를 관리하고 싶을 때.

🔗레퍼런스

참고 강의/글

• https://recoiljs.org/ko/docs/introduction/getting-started/
• https://jotai.org/docs/introduction
• https://ko.legacy.reactjs.org/docs/context.html

읽을 예정

• https://react.dev/learn/passing-data-deeply-with-context
• https://react.dev/reference/react/useContext