[WIL]Context API

Context API 란 ?

 

Context ? 

리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능으로 주로 전역적으로 필요한 값을 다룰 때 사용한다. 쉽게 말하면

리액트 컴포넌트에서 Props가 아닌 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다.

 

사용하는 이유 

일반적으로 컴포넌트에게 데이터를 전달해주어야 할 때 Props를 통해 전달하는데, 깊숙히 위치한 컴포넌트에 데이터를 전달해야 하는 경우에는 여러 컴포넌트를 거쳐 연달아 Props를 설정 해주어야 하기 때문에 이 문제를 해결 하고자 사용한다. *Props Drilling 문제 

 

사용 방법 

createContext 라는 함수를 불러와서 만들 수 있다. 

import { createContext } from 'react';
const MyContext = createContext();

Context 객체 안에 Provider라는 컴포넌트가 있다. 그리고 그 컴포넌트간에 공유하고자 하는 value라는 props로 설정하면 자식 컴포넌트들에게 해당 값에 바로 접근이 가능하다.

    return (
        <myContext.Provider value={value} >
            {props.children}
        </myContext.Provider >
    )

이렇게 하면 원하는 컴포넌트에서 useContext 라는 Hook을 사용하여 바로 접근할 수 있다. 해당 Hook의 인자에는 createContext로 만든 Mycontext를 넣는다. 

export const useMyContext = () => {
    return useContext(myContext);
};

그리고 사용할 Props를 지어준다 !

export const Context = (props) => {
    const [timerMessage, setTimerMessage] = React.useState(false)
    const [btnOpen, setBtnOpen] = React.useState(false);
    const btnClickOff = () => setBtnOpen(false);
    const btnClickOn = () => setBtnOpen(!btnOpen);

    const [tabNum, setTabNum] = React.useState(0);
 }

 

🎯출처

https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법