7.4.4 SearchContext 만들기

검색어 상태를 관리하기 위해 SearchContext를 만듭니다.

contexts/SearchContext.js

import React, {createContext, useState} from 'react';

const SearchContext = createContext();

export function SearchContextProvider({children}) {
  const [keyword, onChangeText] = useState('');
  return (
    <SearchContext.Provider value={{keyword, onChangeText}}>
      {children}
    </SearchContext.Provider>
  );
}

export default SearchContext;

이번 Context는 별도로 만들어야 할 함수가 없습니다. useState로 만든 상태 값인 keyword와 업데이터 함수인 onChangeText를 SearchContext.Provider의 value로 설정하면 됩니다. Context를 다 만든 다음 App 컴포넌트를 열어 SearchContextProvider 컴포넌트를 불러와 사용해주세요.

SearchContext와 기존에 만든 LogContext는 의존 관계가 아니기 때문에 Provider 컴포넌트의 사용 순서는 중요하지 않습니다.