React - Context

리액트에서 데이터 흐름을 컨트롤 하는 방법(state 관리하는 법)은 여러가지가 있다.

 

• state 와 props 를 사용해서 컴포넌트 간에 전달
• React Context 사용
• mobx 사용
• redux를 사용
• 등등등...

 

 

 

 

이중에서 우리는 Context 에 대해서 알아보자.

 

 

 

 

Context

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

 

 

 

 

 

예제

context 를 사용해서 컴포넌트에 데이터 제공하기

 

애플리케이션에서 데이터를 처리하는 법은 여러가지 방법있다. 이 앱에서 보면 여행 상품을 계산하는 데이터를 처리해줘야 한다. 여행 상품을 추가할수록 그에 맞게 가격을 올려줘야 하고 옵션을 추가해도 올려줘야한다. 그리고 총 가격을 상품 주문 페이지에서도 보고 주문 확인 페이지에서 봐야하기 때문에 데이터를 여러곳에 이동해주어야 한다.

 

 

하나의 주문페이지에 많은 컴포넌트가 존재할 수 있다.

하나의 주문페이지 orderPage 에는

Products 컴포넌트-  상품과 상품 개수를 조절하는 칸이 존재

Options 컴포넌트 - 옵션을 추가하는 항목 존재

 

이 그림에서와 같이 한페이지에 컴포넌트가 많을 경우, A 컴포넌트에서 E 컴포넌트로 전달해주려면 A->B->D->E 혹은 E->D->B->A로 전달하는 하는 과정을 거치게 된다. 뿐만 아니라 다른 페이지에 전달해주려면 더 복잡한 과정을 거치게 되겠다.

 

 

 

 

 

 

간단한 예제

 

 

context 를 사용하려면 context 를 먼저 생성해야 하겠다.

이때 필요한건 createContext

 

// 이 파일은 context 파일이라고 생각하면 됨
import React, { createContext } from "react";

export const UserContext = createContext();   // context 생성

const UserStore = (props) => {

	const users = {
    		name: 'jihyun',
        	age: 26
    	}
        
    return <UserContext.Provider value={users}>{props.children}</UserContext.Provider>
    // value 안에 전달하고 싶은 값(객체 형태)을 넣어준다
    // Provider 사이에는 props.children 을 사용해서 하위 컴포넌트를 랜더링 해주는 것
}

export default UserStore;

 

 

해당 context 파일은 위와 같이 만들면 된다.

 

 

 

이론 설명)

context 를 만들고 어떤 특정한 컴포넌트를 연결하면 그 하위에 있는 모든 컴포넌트들은 context 에 대해 접근이 가능하다.

그래서 About, Profile 이라는 컴포넌트가 있고 최상위 컴포넌트는 App 이라고 가정할 때 이 App 에 context 를 연결해보자.

 

 

 

 

 

 

 

// 최상위인 App 컴포넌트
import React from "react";
import { BrowserRouter as Router, Route, Switch ] from "react-router-dom";
import { About } from "./pages/About";
import { Profile } from "./pages/Profile";
import { UserStore } from "./store/users";

export default function App(){
	return (
    	<UserStore>
        	<Router>
        	<Switch>
        		<Route path="/about">
        			<About>
        		</Route>
        		<Route path="/profile">
        			<Profile>
        		</Route>
        	</Switch>
        	</Router>
        </UserStore>
    )
}

 

App 과 context 를 연결해주자

위에서 만들어뒀던 context 파일인 UserStore 를 import 해서 불러온다.

그리고 이걸 바깥에다가 감싸준다.

 

 

 

 

 

이제 감싸져있는 하위 컴포넌트에서 context 에 있는 값을 불러와주자.

이때 필요한건 useContext

 

 

context 를 생성할 때는 createContext(), 불러올 때는 useContext()

 

 

 

import React, { useContext } from "react";
import { UserContext } from "../store/users";

export default function About(){
	const context = useContext(UserContext);
    	console.log(context);    // 반환값은 우리가 사용하고자 했던 객체를 반환 = users
    
    return (
    	<div>
        	<h3>About</h3>
            	<span>{context.name}</span>
        </div>
    );
}

 

반환값

Object { name: 'jihyun', age:26 }