Next js (넥스트 js)- Hook 5편 - useContext

1편 useRef

2편 use Effect

3편 useDropZone

4편 useCallback

 

---

5번째 react Hook 인 useContext

에 대해 포스팅 하려 한다.

​

주 내용은

"context"

의 데이터 활용 이다.

 

 

​

Context (컨텍스트) 란 ?

• 일반적으로 전역적인 상태를 관리
• 여러 컴포넌트 간에 데이터를 공유할 때 사용

​

​

​

useContext 란 ?

• 해당 선언을 통해, 타 컴포넌트에서 쉽게 context의 데이터를 가져올 수 있는 방법 (컴포넌트 간에 props drilling을 피할 수 있음 )
  • Ex. A-> D로 넘겨줘야 하는 데이터가 있는데, A->B->C-> D 의 계층 구조 일 때, A부터 D까지 props로 데이터를 넘기는 것이 아닌 , useContext를 통해 A에서 선언 후 ,바로 D에서 사용.
• 전역 상태를 관리할 때 사용 (인증 정보, 언어 설정 ,사용자 정보 etc.)

​

​

​

useContext 사용법

• 컨텍스트 생성 : 먼저 createContext로 컨텍스트를 생성합니다.
• Provicer로 값 제공 : Context.Provider를 통해 값을 하위 컴포넌트에게 전달.
• useCOntext로 값 사용 : 하위 컴포넌트에서 useContext를 사용하여 컨텍스트 값을 받아 사용

​

​

​

예시 )

​

1. 컨텍스트 생성

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

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

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    // 2. Provider를 통해 value 전달
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

 

 

2. useContext 사용

 

import React, { useContext } from 'react';
import { UserContext } from './UserProvider';

const UserProfile = () => {
  // 3. useContext로 값 소비
  const { user } = useContext(UserContext);

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

 

 

3. UserProvider 사용하는 곳에 선언 (저는 전역으로 사용하기에 app.ts에 선언)

 

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

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

export default App;

 

​

여기까지가 useContext의 사용입니다.

​

​

​

도움이 되었다면

댓글고 좋아요 부탁드립니다.