React에서 컨텍스트를 설정하는 방법

Context API는 Redux와 같은 상태 관리 라이브러리를 사용하지 않고도 애플리케이션이 앱 수준 상태를 가질 수 있도록 하는 React의 기능입니다. React로 작업할 예정이라면 모든 사람이 사용해 볼 것을 적극 권장하는 깔끔한 기능입니다. 그러나 그것을 설정하는 것은 초보자에게 약간 혼란스러울 수 있습니다. 여기서는 Context를 설정하는 방법에 대해 설명하겠습니다. 이것은 결코 "최선의 방법"이 아니므로 Context를 구현하는 보다 효율적인 방법이 있다면 듣고 싶습니다.

먼저 npx create-react-app 명령을 사용하여 새 React 앱을 만들고 코드 편집기에서 새 프로젝트를 엽니다. 그렇게 했다면 파일 구조는 다음과 같아야 합니다.

컨텍스트 설정

1단계: "src/"디렉토리에 "context"폴더를 만듭니다.
2단계: 컨텍스트 폴더에 "type.js"파일을 만듭니다. 이 파일은 감속기 작업 유형을 보관합니다.

// src/context/types.js
export const ADD_CONTACT = "ADD_CONTACT"; // this will eventually be passed to the reducer

3단계: "컨텍스트"폴더에서 폴더를 만들고 관리할 상태를 따라 이름을 지정합니다. 이 예에서는 사용자의 연락처를 추적하는 앱을 만들고 있으므로 이 폴더의 이름을 "연락처"로 지정했습니다.

4단계: "contact"폴더에서 Context, Reducer 및 State에 대한 3개의 파일을 만듭니다. 이 예에서 내 파일은 contactContext, contactReducer 및 ContactState입니다.


5단계: contactContext 파일에서:

// src/context/contact/contactContext.js
import { createContext } from "react"; 

const contactContext = createContext(); // declare your context variable and set it to a new context using createContext()

export default contactContext;

여기서는 단순히 새 컨텍스트를 초기화하고 내보냅니다. 이것은 ContactState로 가져올 것입니다.

6단계: contactReducer 파일에서:

// src/context/contact/contactReducer.js
import {
  ADD_CONTACT
} from "../types"; // import the action types you will be using in this reducer

// export your switch case statement to handle the actions dispatched to the reducer
export default (state, action) => {
  switch (action.type) {
    case ADD_CONTACT:
      return {
        ...state,
        contacts: [...state.contacts, action.payload],
      };
    default:
      return state;
  }
};

7단계: ContactState 파일에서:

// src/context/contact/ContactState.js
import React, { useReducer } from "react"; // import useReducer hook
import { v4 as uuid } from "uuid"; // using uuid to create random ID for a new contact

// import contactContext and contactReducer
import ContactContext from "./contactContext"; 
import ContactReducer from "./contactReducer";

// import types from types.js to be dispatched to ContactReducer vis the useReducer hook
import {
  ADD_CONTACT
} from "../types";

const ContactState = (props) => {
  const initialState = {
    contacts: [
      {
        id: 1,
        name: "John Doe",
        email: "[email protected]",
        phone: "111-111-1111",
      }
  };

// pass ContactReducer and initial state to useReducer hook in order to mutate app-level state
  const [state, dispatch] = useReducer(ContactReducer, initialState); 

  // Add Contact
  const addContact = (contact) => {
    contact.id = uuid();
    dispatch({ type: ADD_CONTACT, payload: contact });
  };

  return (
    {/* Return the Context Provider with the value prop set as an object of the state and props we want all components to have access to  */}
    <ContactContext.Provider
      value={{
        contacts: state.contacts, {/* passing down contact state*/}
        addContact {/* passing down a function*/}
      }}
    >
      {props.children}
    </ContactContext.Provider>
  );
};

export default ContactState;

8단계: 마지막으로 ContactState를 App.js로 가져오고 공급자에서 전체 앱을 래핑합니다.

// src/App.js
import React from 'react';
import Contacts from './components/Contacts';
import './App.css';

import ContactState from "./context/contact/ContactState";

const App = () => {
  return (
    {/* Wrap entire app in ContactState, which returns the Provider. This will allow all components in the app to have access to the state in ContactState */}
    <ContactState>
      <Contacts />
    </ContactState>
  );
}

export default App;

ContactState에서 전체 앱을 래핑하면 App의 모든 구성 요소가 ContactState의 자식이 되며 이제 useContext 후크를 통해 상태에 액세스할 수 있습니다.

//src/components/Contacts.js
import React, { useContext } from "react"; // importing useContext hook
import ContactContext from "../../context/contact/contactContext";

const Contacts = () => {
  // declare a context variable with the useContext hook and now the Context component has access to the state from ContactContext
  const contactContext = useContext(ContactContext);

  // destructure out contacts from our contactContext
  const { contacts } = contactContext;

  return (
    <div>
      {contacts.map(contact => <h1>{contact.name}</h1>)}
    </div>
  );
};

export default Contacts;