React Context API 사용 및 Props와 Context의 차이점

컨텍스트 API 사용 방법

– React 애플리케이션에서 전 세계적으로 데이터 공유 및 관리이를 수행하는 방법을 제공합니다(간편한 전역 상태 관리 허용).

– 부모 -> 자식 데이터를 구성 요소에 전달할 때 소품을 전달하지 않고도 구성 요소 간에 데이터를 공유할 수 있습니다.

1. UserContext.js 파일 생성

– createContext function import : 새로운 Context를 생성할 때 사용하는 기능

– 초기 값을 null로 지정하고 다른 구성 요소에서 사용하기 위해 내보냅니다.

import { createContext } from “react”;
내보내기 const UserContext = createContext(null)

2. App.js(상위)

– UserContext 컴포넌트 가져오기

‘./components/UserContext에서 { UserContext } 가져오기

const (user, setUser) = useState('');
    return (
        <UserContext.Provider value={{user, setUser}}>
            <div className="App">
                <HeaderPage/>
                <Switch>
                    <Route path="/" component={HomePage} exact={true}/>
                    <Route path="/users" component={UsersPage}/>
                    <Route path="/chats" component={ChatsPage}/>
                    <Route path="/login" component={LoginPage}/>
                </Switch>
            </div>
        </UserContext.Provider>
    );

– 상태 변수(user, setUser)를 생성하고 ‘ ‘(비어 있음)을 초기값으로 설정합니다.

– UserContext.ProviderUserContext라는 컨텍스트 개체를 사용하여 하위 구성 요소에 데이터 전달 ( componentname.vendor )

– 전송할 데이터를 지정하여 value 속성을 통해 전송된 user 및 setUser를 사용할 수 있습니다.

3. 자식(자식) 구성 요소에서 useContext 사용

– useContext 후크, UserContext 컴포넌트 가져오기

‘반응’에서 {useContext} 가져오기
import { UserContext } from ‘./UserContext’;

const {user, setUser} = useContext(UserContext);

– UserContext.provider로 전송된 값(user, setUser)은 애플리케이션 전체에서 사용할 수 있습니다.

– useContext 후크를 사용하여 userContext 값을 반환하고 분해합니다.

문맥의 차이 <-> 소품