useContext

김민우·2022년 12월 27일
0

스파르타 내배캠4기

목록 보기
43/73

📌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;
profile
개발자로서 한걸음

0개의 댓글