보통 컴포넌트에 데이터를 넘겨줄 때 props
를 통해 넘겨준다.
부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달해주려면 props
로 값을 넘겨주고 자식 컴포넌트는 props
를 통해 받은 데이터를 사용한다. 자식의 자식 컴포넌트도 마찬가지이다.
부모 컴포넌트는 자식에게 props
를 통해 데이터를 넘겨주고,
자식은 또 자식에게 props
를 통해 데이터를 넘겨주게 되는 것이다.
작은 프로젝트에서 props
전달은 문제가 없다. 하지만 프로젝트가 커져서 부모가 n번째 자손에게 넘겨줘야 한다면 n-1개의 자손에게 props
를 사용하여 전달하게 된다.
어떻게 보면 전달을 위한 전달이라고 할 수도?
계속해서 불필요한 props
를 사용하게 되고 의미없는 값들이 컴포넌트들을 스쳐가게 된다.
context
이다.context
는 props
를 사용하지 않고 데이터를 전달하도록 해준다.
props를 사용하지 않고 n번째 자손에게 직접 데이터를 건네준다. n-1개의 자식을 통과하여 n번째 자식에게 데이터를 전달하지 않아도 부모에서 바로 n번째 자식에게 값을 전달할 수 있게 된다.
context
는 props
에 대한 전역 데이터 저장소라고 할 수 있다.
import React from "react";
const App = () => {
return (
<Greeting value={{ name: "Jane", id: "JaneIsFree" }} />
);
};
// App의 자식에게 props로 데이터 전달
const Greeting = (props) => {
const id = props.value.id;
const name = props.value.name;
return (
<div>
<h2>{id}</h2>
<strong>{name}</strong>
<GreetingTwo value={{ id, name }}/>
</div>
);
};
// App의 자식의 자식에게 props로 데이터 전달
const GreetingTwo = (props) => {
const id = props.value.id;
const name = props.value.name;
return (
<div>
<h2>Two : {id}</h2>
<strong>Two : {name}</strong>
</div>
);
};
export default App;
// createContext 추가
import React, { createContext } from "react";
// createContext로 context 생성
const UserInfo = createContext({ name: "Jane", id: "JaneIsFree" });
const App = () => {
return (
// <Greeting value={{ name: "Jane", id: "JaneIsFree" }} /> // 데이터 밖으로 꺼내기(전역)
<Greeting />
);
};
// App의 자식에게 데이터 전달
const Greeting = () => {
// const id = props.value.id;
// const name = props.value.name;
return (
// Context.Consumer 형식으로 감싸줌
<UserInfo.Consumer>
{(value) => (
<div>
<h2>{value.id}</h2>
<strong>{value.name}</strong>
<GreetingTwo/>
</div>
)}
</UserInfo.Consumer>
);
};
// App의 자식의 자식에게 데이터 전달
const GreetingTwo = () => {
// const id = props.value.id;
// const name = props.value.name;
return (
<UserInfo.Consumer>
{(value) => (
<div>
<h2>Two : {value.id}</h2>
<strong>Two : {value.name}</strong>
</div>
)}
</UserInfo.Consumer>
);
};
export default App;
import React, { createContext } from "react";
const UserInfo = createContext({ name: "Jane", id: "JaneIsFree" });
// Greeting을 UserInfo.Provider로 감싸서 값을 전달하면
// consumer로 전달되는 value 값이 바뀜
const App = () => {
return (
// .Provider에 value를 꼭 넣어야 함(안 넣으면 에러 발생 )
<UserInfo.Provider value={{ name: "Aaron", id: "ImAaron" }}>
<Greeting />
</UserInfo.Provider>
);
};
const Greeting = () => {
return (
<UserInfo.Consumer>
{(value) => (
<div>
<h2>{value.id}</h2>
<strong>{value.name}</strong>
<GreetingTwo/>
</div>
)}
</UserInfo.Consumer>
);
};
const GreetingTwo = () => {
return (
<UserInfo.Consumer>
{(value) => (
<div>
<h2>Two : {value.id}</h2>
<strong>Two : {value.name}</strong>
</div>
)}
</UserInfo.Consumer>
);
};
export default App;