React Context

상품 옵션들의 가격을 구하는 부분에서 해당하는 컴포넌트에 구현하였는데
Context를 통해 컴포넌트간에 값을 공유 할 수 있는 것을 알게되어 공부했다.

우선 Context란 무엇인가 하면

• 컴포넌트간에 어떠한 값을 공유할 수 있게한다. 전역으로 필요한 값을 다룰 때 사용하는데, 그렇다고 꼭 전역적으로만 사용할 필요는 없다.

일반적으로는 부모컴포넌트에서 자식컴포넌트로 props를 통해 데이터를 전달하는데 context 를 만들어놓으면 데이터를 어떤 컴포넌트 트리에서도 쉽게 사용할 수 있는 장점이 있다.
그렇다면 어떻게 사용해야 할까?

1.Context 생성

    // UserContext.tsx
import React, { createContext, useContext, useState } from 'react';

// 사용자 정보의 타입 정의
interface User {
  name: string;
  age: number;
}

// Context의 타입 정의
interface UserContextType {
  user: User | null;
  setUser: (user: User) => void;
}

// Context 생성
const UserContext = createContext<UserContextType | undefined>(undefined);

// Provider 컴포넌트
export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null); // 초기값은 null로 설정함

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

// Context를 사용하는 커스텀 훅
export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error("useUser must be used within a UserProvider");
  }
  return context;
};

그리고 이 context를 사용하기 위해서는 사용하려는 컴포넌트들을 Provider로 감싸야한다.

2. Provider

    // App.tsx
import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './UserProfile';

function App() {
  return (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );
}

export default App;

그 다음으로 context를 사용하기 위해 해당하는 컴포넌트에서 사용을 한다.

    // UserProfile.tsx
import React from 'react';
import { useUser } from './UserContext';

const UserProfile = () => {
  const { user, setUser } = useUser(); // Context에서 사용자 정보와 설정 함수를 가져온다.

  const handleLogin = () => {
    // 예시로 사용자 정보를 설정하는 함수
    setUser({ name: "홍길동", age: 30 });
  };

  return (
    <div>
      <h1>사용자 프로필</h1>
      {user ? (
        <div>
          <p>이름: {user.name}</p>
          <p>나이: {user.age}</p>
        </div>
      ) : (
        <p>로그인하지 않았습니다.</p>
      )}
      <button onClick={handleLogin}>로그인</button>
    </div>
  );
};

export default UserProfile;

내가 이해한대로 사용법을 정리한것인데 100% 맞다고는 할 수 없다. 다음에 context 를 통해 구현하면서 더 정확하게 다뤄봐야할 것 같다.