React - context API를 사용해보자!

 

리액트에서 state를 관리하는 방법은 다양하다.

리액트는 단방향 워터풀 방식으로 부모에서 자식에게 props를 통해서 전달되어, 데이터 흐름이 일정하다.

그 말은 흐름을 비교적 알기 쉬워서 이해가 빠르게 된다는 장점도 가질 수 있다.

대표적으로 Redux, Mobx와 같은 것을 활용하여 state를 관리하게 되는데, Redux는 한번 사용하려면 귀찮다? 혹은 까다롭다? 라는 것이 따라붙는다.

큰 데이터도 아니고, 어떤 한 부분만 전달 하고 싶은 경우 굳이 Redux나 Mobx를 사용할 필요 없이 contextAPI를 활용할 수 있을 것이다.

특히 요즘은 contextAPI를 잘 만들어놔서 많은 경우 사용하기 좋다고 할 수 있다.

전체적으로 데이터를 전달해야하는 경우 Redux, Mobx를 사용하면 좋을 것이고, 어떤 부분에만 전달하고 싶다면 contextAPI를 활용해볼 수 있을 것이다.

 

그렇다면 contextAPI는 어떻게 사용 할 수 있을까?

 

context API 공식문서에 따라가보자!

context API 공식문서 : https://ko.reactjs.org/docs/context.html

 

설명에 따르면, context는 글로벌하게(전역적으로) 데이터를 공유 하도록 만든 방식이다.

context를 사용하게 되면 중간에 있는 Elements에게 props를 넘겨주지 않아도 된다.

이는 네스팅 된 많은 컴포넌트에게 데이터를 전달하기 쉽도록 만들어졌찌만, 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 쓰라고 되어있다.

 

---

 

그렇다면 이제 어떻게 사용하는지 알아보자!

 

1. 우선 context 라는 폴더를 만들고 그 안에 ProfileContext.jsx 라는 파일을 만들어주자!

 

2. ProfileContext.jsx 안에 createContext를 만들자!

import React, { createContext } from "react";

const ProfileStore = createContext();

const ProfileContext = (props) => {

    const obj = {
        name: "Patrick",
        age: 12,
        job: "frontend developer",
    };

    return (
        <ProfileStore.Provider value={obj}>
            {props.children}
        </ProfileStore.Provider>
    );
};

export { ProfileStore, ProfileContext };

이렇게 만들게 된다.

 

이 후 사용하는 가장 외부에서 Wrapping을 해주게 되는데 아래와 같이 감싸준다.

import Profile from "./components/Profile";
import { ProfileStore } from "./context/ThemeColors";

function App() {
    return (
        <ProfileStore>
            <Profile />
        </ProfileStore>
    );
}

export default App;

그리고 사용하는 곳(Profile.jsx)로 가서 사용해보자.

 

import React, { useContext } from "react";
import { ProfileContext } from "../context/ProfileContext";

const Profile = () => {

    const profile = useContext(ProfileContext);

    return (
        <div>
            {profile.name} // "Patrick"
            {profile.age} // "12"
            {Profile.job} // "frontend developer"
        </div>
    );
};

export default Profile;

 

그래서 처음 만들 때 createContext를 사용해주고, 사용할 때는 useContext를 사용해준다는 점만 기억을 하면 될 것 같다.

context 파일에서 정보를 감싸고 있는 부분으로 wrapping을 해주고, createContext를 변수로 하는 것을 사용해서 정보를 꺼내어 사용하면 된다!