intro

오늘은 React에서 제공하는 상태관리 솔루션인 Context API를 해보도록 하겠습니다.

이전에 Context API와 Redux의 장단점에 대해서 정리를 해본적이 있는데 그 중에서 Context API에 대해서 한번 알아보도록 하겠습니다!

📘 Context API간단한 예제

//UserContext.ts
import { createContext } from 'react';

export type User = {
   name : string,
   age : number
}
export type Users = User[];

const UserContext = createContext<Users | []>([]);

export default UserContext

일단 Context를 정의를 해줍니다.
Context는 하나의 상자라고 생각을 하고,
아무런 작업을 해준게 없는 지금은 Context에 접근할 수 없다는 것을
기억해주세요!

그 다음 이 상자에 접근할 수 있는 권한을 부여할 컴포넌트를

<UserContext.Provider value={users}>
            <User />
</UserContext.Provider >

이렇게 감싸줍니다. value속성에는

const users:Users = [
    {
        name : "홍준혁",
        age : 18
    }
  ]

이렇게 데이터를 정의해줍니다.
그 다음 User컴포넌트를 가봅시다.

import UserContext from 'contexts/User';
import { useContext, useEffect } from 'react';

const User = () => {
    const user = useContext(UserContext);
    useEffect(() => {
        console.log(user);
    } , [])

    return <></>
}

export default User;

이렇게 해서 콘솔창을 보면

정상적으로 배열이 출력되는 모습을 볼 수 있습니다.