📌context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.
사용법
import React, { createContext, useState } from 'react';
export const UserInfoContextStore = createContext();
const UserInfoContext = (props) => {
const [ name, setName ] = useState();
const [ age, setAge] = useState();
const UserInfo = {
name,
setName,
age,
setAge
}
return (<UserInfoContextStore.Provider value={UserInfo}>{props.children}</UserInfoContextStore.Provider>);
};
export default UserInfoContext;
context 등록
import React, { useContext } from 'react';
import { UserInfoContextStore } from '../Stores/UserInfoContext';
const style = {
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: "150px"
},
}
const User = () => {
const UserInfo = useContext(UserInfoContextStore)
return (
<div style={style.container}>
이름 : {UserInfo.name}
</div>
);
};
export default User;