🔥 Context API 연습해보기 🦾

이전에 포스팅들에서 간단한 이론과 실제로 이론을 구현해 보는 간단한 코드로 어떻게 동작하는지 이해를 하고 이제는 간단한 프로젝트로 체화를 시킬 예정입니다!

(연습에는 역시 Board 제작이 최고..👍)

🔨 준비물

(👇 요렇게 생긴 간단한 react 파일 )

1️⃣ Context , Provider 생성

//ThemeContext.js

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

export const ThemeContext = createContext(); // context 생성!

function ThemeContextProvider(props) // 부모 노드 선언
{
    const [state ,setState ] = useState({
        isLightTheme : true,
        light : {syntax : '#555', ui : '#ddd', bg: '#eee'},
        dark  : {syntax:'#ddd',ui: '#333', bg: '#555'}
    })
    // 처음 값 설정

    return(
        <ThemeContext.Provider value={{...state}}> // Provider 선언 + 값 넣어줌 
            {props.children} // context 적용 범위 설정
        </ThemeContext.Provider>
    )
}

export default ThemeContextProvider;

2️⃣ 컴포넌트에서 Context 접근하기

// App.js

function App() {
  return (
    <div className="App">
      <ThemeContextProvider> // 적용
      
        <Navbar /> 
        <BookList />
        // 위의 두 자식 컴포넌트들은 context 접근 권한 얻게 됨
      </ThemeContextProvider>
    </div>
  );
}
export default App;

방법 1

// BookList.js

import React, { Component, useContext} from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

function BookList () { 
  const context = useContext(ThemeContext) // ThemeContext context를 사용 할거야! (접근)
  const {isLightTheme , light, dark} = context // 값 fetch
  const theme = isLightTheme ? light : dark;
  
    return ( 
      <div className="book-list" style={{color : theme.syntax, background : theme.bg}}>
        <ul>
          <li style={{background: theme.ui}}>the name of the wind</li>
          <li style={{background: theme.ui}}>the way of kings</li>
          <li style={{background: theme.ui}}>the final empire</li>
        </ul>
      </div>
    );// 적용
}
 
export default BookList;

방법 2

// Navbar.js

import React from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

function Navbar () {
    return (
      <ThemeContext.Consumer> // 컨수머 사용하면 가장 가까운 부모의 context 접근 ( 여기선 하나 뿐)
      {(context) =>{ // 내부 값 접근
        const { isLightTheme, light, dark } = context; // fetch
        const theme = isLightTheme ? light : dark;
        return( // 적용
          <nav style={{background: theme.ui, color: theme.syntax }}>
            <h1>Context App</h1>
            <ul>
              <li>Home</li>
              <li>About</li>
              <li>Contact</li>
            </ul>
          </nav>
        )
      }} 
      </ThemeContext.Consumer>
    );

} 
export default Navbar;

👇 아래를 보면 둘다 정상적으로 context에 있는 값을 접근한것을 볼 수 있음

3️⃣ Context 값 수정

// ThemeContextProvider.js
function ThemeContextProvider(props){
   	
    ....

    const toggleTheme = () =>{
        setState({...state,isLightTheme : !state.isLightTheme});
    } // 상태 변경 함수 작성.
    return(
        <ThemeContext.Provider value={{...state, toggleTheme: toggleTheme}}> // value에 넣어주면 끝!
            {props.children}
        </ThemeContext.Provider>
    )
}
그러면 이제 자식들이 toggleTheme함수도 사용 가능!

//ThemeToggle.js

function ThemeToggle (){
    const context = useContext(ThemeContext);
    const { toggleTheme } = context 
    return(
        <button onClick={toggleTheme}> // 요로코롬 넣어서 사용 가능!
            Toggle the theme
        </button>
    )
}

export default ThemeToggle

그러면 이제 결과적으로

여기에서 버튼을 클릭하면

👍