[React] Context API

context API

1. 컨텍스트 만들기

const mycontext = createContext(기본값)

 

App

<MyContext.Provider value = {user}>

</MyContext.Provider>

 

2. 컨텍스트 값 사용하기

const user = useContext(MyContext)

 

 

context-react

1. MainPage.js

2. Header.js

3. Footer.js

4. Content.js

 

---

 

App.js

import './App.css';
import MainPage from './components/MainPage';
import { useState } from 'react'
import { ThemeContext } from './context/ThemeContext';

function App() {
  const [ isDark, setIsDark ] = useState(false);   
  return (
    // 두번재 방법
    // context로 보낼 수 있음
    <ThemeContext.Provider value={ {isDark, setIsDark}}> 
    <div className="App">

      {/* 첫번째 방법 */}
      {/* MainPage props 자리에 이것들을 받음 */}
      {/* <MainPage isDark={isDark} setIsDark={setIsDark}/>  */}

      <MainPage/>
    </div>
    </ThemeContext.Provider>
  );
}

export default App;

 

Components/MainPage.js

import React, { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
import Content from './Content';
import Footer from './Footer';
import Header from './Header';

const MainPage = () => { // props 자리에 있던 것들: { isDark, setIsDark }
    // const data = useContext(ThemeContext);
    // console.log(data);
    return (
        <div>
            <Header />
            <Content />
            <Footer/>


            {/* 첫번째방법 */}
            {/* <Header isDark={isDark}/>
            <Content isDark={isDark}/> */}

            {/* 버튼이 footer에 있으니깐 */}
            {/* <Footer isDark={isDark} setIsDark={setIsDark}/> */}
        </div>
    );
};

export default MainPage;

 

Components/Header.js

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

const Header = () => {   // {isDark}
    const {isDark} = useContext(ThemeContext);
    return (
        <div className={isDark? 'header dark' : 'header'}>
            <h1>
                Green
            </h1>
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
            </ul>
        </div>
    );
};

export default Header;

 

Components/Content.js

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

const Content = () => { // {isDark}
    const { isDark } = useContext(ThemeContext);
    return (
        // <div className='content'>
        <div className={isDark? 'content dark' : 'content'}>
            좋은 하루 되세요 ~
        </div>
    );
};

export default Content;

 

Components/Footer.js

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

const Footer = () => { // {isDark, setIsDark}
    const { isDark, setIsDark } = useContext(ThemeContext);
    const onClickDark = () => {
        setIsDark(!isDark)
    }
    return (
        <div className={isDark ? 'footer dark' : 'footer'}>
            <button onClick={onClickDark}>다크모드</button>
        </div>
    );
};

export default Footer;

 

Context/ThemeContext.js

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

 

App.css

* { margin : 0; padding: 0; box-sizing: border-box;}
li { list-style: none; }
.App {
  text-align: center;
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.header.dark {
  background: black;
  color: #fff;
}
.header ul {
  display: flex;
}
.header li {
  padding: 0 20px;
}
.content {
  height: 700px;
  padding-top: 100px;
}
.content.dark {
  background-color: #666;
  color: #fff;
}
.footer {
  border-top: 1px solid #ccc;
  padding: 30px;
  height: 100px;
}
.footer.dark {
  background-color: #333;
  color: #fff;
}
.footer button {
  outline: none;
  padding: 10px 20px;
  float: right;
}
.footer.dark button {
  background-color: #eee;
}

 

---

 

begin-react

App.js

import React, { useReducer, useContext } from 'react';
import { MyContext } from './component/MyContext';
import Counter2  from './Counter2';

function App() {
  const newtext = "안녕하세요";
  // const name = "리액트";
  return (
    // JSX에서 자바스크립트 표현식을 사용하려면 {}로 감싼다.
    // if문 대신 조건부연산자 - 삼항연산자를 사용 
    <MyContext.Provider value={newtext}>
    <div className='react'>
      <Counter2 />
      {/* <MyComponent name='green' age ='20'><h2>h2입니다.</h2></MyComponent> */}
    
      {/* <MyComponentClass name="classGreen" age={30}>
        <h3>children</h3>
      </MyComponentClass>
      <MyComponentClass></MyComponentClass> */}

      {/* <MyComponent name='Green' age='30'/><h3>여러분</h3><MyComponent/>
      <MyComponent name='Blue' age={50}/><h3>새과목</h3><MyComponent/>
      <MyComponent/><h3>하하하</h3><MyComponent/> */}

      {/* <h1>{name == '리액트' ? (<span>리액트입니다.</span>) : (<span>리액트가 아닙니다.</span>) } 안녕!</h1> */}
      {/* <h2>하이하이</h2>
      <input type="text"></input> */}
    </div>
    </MyContext.Provider>
  );
  // return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

export default App;

 

Counter2.js

import React, { useReducer, useContext } from 'react';
import { MyContext } from './component/MyContext'
function reducer(state, action) {
    switch(action.type) {
        case "INCREASE":
            return state +1;
            case "DECREASE":
            return state-1;
            default:
            return state;
    }
}

const Counter2 = (props) => {
    const contextText = useContext(MyContext);
    console.log(contextText);
    // let number = 0;
    const [ number, dispatch ] = useReducer(reducer, 0);   // 기본값은 0이다 
    function Increase() {
        dispatch({type: "INCREASE"});
    }
    function Decrease() {
        dispatch({type: "DECREASE"});
    }
    return (
        <div>
            <h2>{number}</h2>
            <button onClick={Decrease}>-1</button>
            <button onClick={Increase}>+1</button>
        </div>
    );
};

export default Counter2;

 

MyContext.js

import { createContext  } from "react";
export const MyContext = createContext("월요일");