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

📌 Context API 사용법

- 리액트 애플리케이션에서 전역적으로 데이터를 공유하고 관리하는 방법을 제공한다. (간편한 전역 상태 관리 가능)

-  상위 -> 하위 컴포넌트로 데이터 전달 시 속성(props)을 전달하지 않고도 컴포넌트 간 데이터를 공유할 수 있도록 해줌

 

1. UserContext.js 파일 생성

- createContext함수 import : 새로운 컨텍스트 생성할 때 사용하는 함수

- UserContext라는 context 생성, 초기값 null로 주고 다른 컴포넌트에서 사용할 수 있도록 export

import { createContext } from "react";
export const UserContext = createContext(null)

 

2. App.js (부모) - Provider로 하위 컴포넌트에 value값 보내기

- UserContext 컴포넌트 import

import { UserContext } from './components/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.Provider: UserContext라는 컨텍스트 객체로 하위 태그를 감싸 데이터를 전달  [ 컴포넌트명.Provider ]

- value 속성을 통해 전달하려는 데이터를 지정하여 이를 통해 보낸 user와 setUser를 사용할 수 있다. {{오브젝트라서 중괄호 두개}}

 

3. 하위(자식) 컴포넌트에서 useContext훅 사용해 value 값 가져오기 

- useContext 훅 , UserContext 컴포넌트 import

import { useContext} from 'react' 
import { UserContext } from './UserContext';

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

- UserContext.provider로 보낸 value값 (user, setUser)를 전체 애플리케이션에서 사용할 수 있다.

- useContext 훅을 사용해 userContext 값을 반환하여 비구조화 할당해준다.

 

📌 Context <-> Props 차이점

context	props
함수, 변수, 객체 등 다양한 종류의 데이터를 저장할 수 있는 공간으로 React 컴포넌트 간에 전역 상태를 공유하는데 사용	주로 속성값을 전달하는데 사용
상위 -> 하위 컴포넌트로 데이터 간접적으로 전달가능 (중간 컴포넌트 건너뛸 수 있다)	상위 -> 하위 컴포넌트 데이터 직접 전달 (상호작용이 명확하고 직접적일때 사용)
전역 상태 관리에 유용, 애플리케이션 전체에서 공유되는 데이터에 대해 접근이 필요한 경우에 적합하다.	읽기 전용이기 때문에 상위 컴포넌트에서 전달받은 props를 하위에서 수정할 수 없다.
props drilling을 방지할 수 있다. -> 코드 구조 단순화하고 관리하기 쉬운 전역상태 구현	중간에 있는 모든 컴포넌트를통해 데이터를 명시적으로 전달해야 되는 경우를 props drilling이라고 한다.