Weekly TIL - Day 10

⭐️ Today's summary

어제 useEffect도 배웠지만 useEffect는 이해가 잘 되었기에 오늘 배운 useContext와

 

커스텀 훅에 대해서 정리해보겠다.

⭐️ Problem

useContext자체는 이해가 되는데 이걸 커스텀 훅으로 바꾼경우와, 커스텀 훅을 만들어 사용하는

 

코드가 잘 이해되지 않아 정리해 보았다.

⭐️ Try

우선 useContext란 리액트의 컨텍스트 시스템에서 데이터를 꺼내 쓰기 위한 훅이다.

 

복잡한 컴포넌트 구조에서, props를 여러 단계를 거쳐서 전달하는 대신, 원하는 컴포넌트에서 바로

 

데이터를 사용할 수 있게 도와준다. 여기서 커스텀 훅을 사용하여 예시를 설명해보겠다.

 

일단 커스텀 훅이란 React의 기본 훅 (useState, useEfeect, useRef 등)을 조합하여 재사용 가능한

 

로직을 추출한 함수이다. 사용 이유는 커스텀 훅으로 분리하면 코드를 더 깔끔하고 유지보수하기 쉽기 떄문.

 

[ useContext 사용법  - 커스텀 훅 버전]

** App.jsx **

import Hader from './components/useContext/Hader';
import { UserProvider } from './components/useContext/UserContext';

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

export default App;

 

** UserContext.jsx **

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

const UserContext = createContext();

export function UserProvider({ children }) {
    const user = {
        name: '김개똥',
        age: 55,
        role: '관리자',
    };

    return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}

export function useUser() {
    return useContext(UserContext);
}

 

** Hader.jsx (Header 오타)**

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

const Hader = () => {
    const user = useUser();

    return (
        <header>
            <h2>안녕하세요, {user.name}님</h2>
            <p>
                나이 : {user.age}세, 등급 {user.role}
            </p>
        </header>
    );
};

export default Hader;

 

 

이 코드가 어떻게 돌아가냐면

 

우선 최상위 컴포넌트인 App 컴포넌트가 실행이되면 

 

<UserProvider>

      <Hader/>

</UserProvider> 가 렌더링 된다

 

이때 UserProvider에 들어가보면 createContext라해서 전역으로 상태 및 함수를 관리할 수 있는 공간을 만든다.

 

그 공간을 만들고

 

<UserContext.Provider value={user}>

      {children}

</UserContext.Provider>;

만든 Context 컴포넌트를 Provider로 감싸고 value에 값을 넣는다.

 

이렇게 되면 전역으로 상태관리 할 수 있는 공간인 Context에 value를 넣어 자식(코드 상에선 children을 의미)

 

컴포넌트들에게 값을 전역으로 사용할 수 있는 공간을 제공한다.

 

그리고나서 그 제공하는 함수를 return하기때문에 children에는 Hader컴포넌트가 들어가는 것이다.

 

이제 Hader컴포넌트는 전역으로 관리중인 Context의 value를 꺼내서 사용할 수 있다.

 

여기서 커스텀 훅을 사용하여 Hader에서 useUser()를 호출하여 return 값으로 useContext의 값을

 

사용할 수 있기때문에 Hader컴포넌트에서 value의 객체인 user를 사용하여 코드에 user.name, user.age 등을

 

사용할 수 있게 되는 것이다.