[React] 서머코딩 3주차 Context/Hook/mock-server

src/App.js

//App.js
import React, {useState} from 'react';
import './App.css';

import {ThemedButton, ThemedContextButton,Counter,Feed} from "./component";
import {ThemeContext,FontContext} from "./context";
function App() {

  const [themeValue, setThemeValue] = useState("dark");
  const [isCounter, setIsCounter] = useState(true);

  return (
    <div className="App">
    <ThemeContext.Provider value={themeValue}>
      <FontContext.Provider value="nanum">
        <ThemedButton theme= {themeValue}></ThemedButton>
        <ThemedContextButton></ThemedContextButton>
        {isCounter===true?<Counter/>:null}
      </FontContext.Provider>
    </ThemeContext.Provider>

    <br/>
    <button onClick={()=>setThemeValue("day")}>daychange</button>
    <button onClick={()=>setThemeValue("dark")}>change</button>
    <br/>

    <button onClick={()=>setIsCounter(false)}>remove counter</button>

    <Feed/>
    </div>
  );
}

export default App;

 

src/context/

//ThemeContext
import React from 'react';

const ThemeContext = React.createContext("day"); // day, night 중에 day가 기본

export default ThemeContext;

//FontContext
import React from 'react';

const FontContext = React.createContext("helevetica");

export default FontContext;

src/component

//ThemedButton
import React, { Component } from 'react';

import ThemeContext from "../context/ThemeContext";

class ThemedButton extends Component {
    static contextType = ThemeContext;

    render() {
        return (
            <button>{this.props.theme}</button>
        );
    }
}

export default ThemedButton;

//ThemedContextButton
import React, { Component } from 'react';
import ThemeContext from "../context/ThemeContext";
import FontContext from "../context/FontContext";


class ThemedContextButton extends Component {
    // static contextType = ThemeContext;

    render() {
        return (
            <>
                <ThemeContext.Consumer>
                    {
                        theme => (
                            <FontContext.Consumer>
                                {
                                    font=> (
                                        <button>{theme} {font}</button>
                                    )
                                }
                            </FontContext.Consumer>
                        )
                    }
                </ThemeContext.Consumer>
                <FontContext.Consumer>
                    {
                        font =>(
                            <button>{font}</button>
                        )
                    }
                </FontContext.Consumer>
            </>
        );
    }
}
export default ThemedContextButton;

 

 

* Hook

src/component/

//Counter
import React, { useState, useEffect } from 'react';

function Counter(props) {
    const [count, setCount] = useState(0);

	// componentDidmount~willUnmount 사이 범위
    useEffect( ()=>{
        console.log("hi")
        return () => {
            console.log("bye"); // clean-up
        }
    },[]);

	// 렌더링될때마다
    useEffect( ()=>{
        console.log("render");
    });
	
    // 특정 state가 바뀔때마다
    useEffect( ()=>{
        console.log("count change");
    },[count]);

    return (
        <div>
            count = {count}
            <button onClick={()=>setCount(count+1)}>count up</button>
        </div>
    );
}

export default Counter;

//Feed
import React, { useEffect } from 'react';
import dAPI from '../dstagramAPIs/DstagramAPIs';

function Feed(props) {

    useEffect( ()=>{
        dAPI.get("/result")
        .then(res=>{
            console.log(res.data);
            console.log(res);
        })
    },[]);

    return (
        <div>
            
        </div>
    );
}

export default Feed;

 

src/dstagramAPIs

import axios from "axios"

const Api = axios.create({
    baseURL: "http://localhost:8080/",
})

export default Api

yarn add json-server

mock/feed.json (src 바깥 폴더)

package.json

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject",

"mock-server": "json-server --watch --port 8080 mock/mock.json"

},