React Context API 시작하기 - 심층 분석

그래서 제 첫 블로그이고 저와 같은 React 개발자 초보자에게 도움이 될 수 있는 글을 게시할 생각을 했습니다. 그래서 저는 지난 3~4개월 동안 반응 작업을 했으며, 첫 번째 큰 프로젝트를 구축하는 동안 우리 대부분이 직면하는 한 가지 신인 문제를 해결했습니다.

컨텍스트 API란 무엇입니까?

컨텍스트 API는 각 구성 요소를 수동으로 명시적으로 전달하지 않고 구성 요소가 일부 데이터를 공유할 수 있도록 하는 방법입니다. 컨텍스트는 React 구성 요소 하위 트리에 대한 전역 개체와 같습니다.

컨텍스트 API가 필요한 이유는 무엇입니까?

거의 모든 개발자는 React 구성 요소가 트리처럼 구성되어 있다는 것을 알고 있습니다. 모든 구성 요소가 연결된 하나의 루트 노드가 있습니다. 이 트리 구조에서 데이터는 위에서 아래로 한 방향으로만 흐릅니다.

prop 드릴 문제는 여러 컴포넌트의 트리 구조를 생성하고 상위 컴포넌트에서 생성된 상태를 하위 컴포넌트에서 사용하려고 할 때 발생합니다. 이러한 경우 모든 구성 요소 수준을 통해 이를 소품으로 전달해야 하는데 이는 좋은 방법이 아닙니다.

한 줄 정의는 "React 자체에서 생성되고 모든 수준에서 전체 트리 구성 요소 아래로 props를 전달하는 방법을 제공하는 API"입니다.

React-app에서 컨텍스트를 사용하는 다양한 방법이 있습니다. 사용 방법은 다음과 같습니다.

1. 먼저 내 앱을 컨텍스트 API에 통합하는 StateProvider.js 파일을 만들었습니다.

StateProvider.js

import React, { createContext, useContext, useReducer } from "react";

export const stateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (

    <stateContext.Provider value={useReducer( reducer, initialState )}>
        {children}
    </stateContext.Provider>
)

export const useStateValue = () => useContext(stateContext);

2. 그런 다음 앱 구성 요소에서 컨텍스트를 사용할 수 있도록 index.js에서 StateProvider를 사용했습니다.

인덱스.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Reducer, { initialState } from './Reducer';
import { StateProvider } from './StateProvider';

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={Reducer}>
    <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

이제 StateProvider.js에서 react에서 createContext() 메소드를 사용하여 컨텍스트를 생성했고 useContext 메소드에서 이를 사용하여 컴포넌트를 통해 상태의 현재 값을 읽을 수 있습니다. 그런 다음 root(App.js) 구성 요소가 될 reducer, initialState 및 children props와 같은 매개 변수를 전달하는 StateProvider 함수를 만듭니다(모든 트리에서 상태를 사용해야 하기 때문에).

이제 index.js에서 구성 요소를 아래 코드에서 생성된 것처럼 reducer.js에서 intialstate와 감속기를 전달하는 StateProvider로 방금 생성한 구성 요소를 래핑했습니다.

3. 그런 다음 intialState와 reducer 함수를 정의한 reducer.js 파일을 만들었습니다.

감속기.js

export const initialState = {
    user: null,
}

function Reducer (state, action) {
    console.log(action)
    switch(action.type) {

        case 'SET_USER':
            return {
                ...state,
                user: action.user
            }
         default:
            return state;
        }
}

export default Reducer;

4. 그런 다음 useStateValue() 즉, useContext()를 사용하여 원하는 곳 어디에서나 내 상태를 사용할 수 있었습니다.

앱.js

import React, { useEffect } from 'react';
import Login from './Login';
import { auth } from './firebase/config';
import { useStateValue } from './StateProvider';

function App() {

  const [{ user }, dispatch] = useStateValue();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authuser) => {
      if(authuser){

        dispatch({
         type: 'SET_USER',
          user: authuser
        })
      } else{    
        dispatch({
          type: 'SET_USER',
          user: null
        })
      }
    })
    return () => {
      unsubscribe();
    }
  }, [])

  console.log("user is...", user)

여기서 initialState는 트리에서 사용하려는 모든 변수를 초기화하는 객체이며 리듀서 함수는 해당 상태의 DOM 업데이트를 처리합니다.

이제 StateProvider.js에서 생성된 useStateValue 변수를 사용하여 App.js에서 user의 현재 값에 접근했습니다. useStateValue 즉, useContext는 첫 번째 값이 상태인 배열을 반환합니다. 즉, 사용자는 {state}로 작성되고 두 번째는 상태 및 작업 유형의 새 값을 전달하는 디스패치 메서드입니다. 페이지가 렌더링될 때 한 번만 수행하면 되므로 useEffect 후크에서 dispatch 메서드를 사용합니다.

여기에서 type을 "SET_USER"로 설정하고 user 값을 firebase에서 가져온 authuser로 설정했습니다. 그래서 이제 type 을 action.type 으로 user 를 action.User 로 전달하며, 감속기 기능에서 스위치의 "SET_USER"경우에 업데이트됩니다. 이전 값을 반환하고 사용자만 업데이트하는 나머지 연산자를 사용하여 사용자 상태를 업데이트했습니다.