section7 8-1. Context API 소개와 지뢰찾기

useReducer 복습

• Redux에서 차용한 것
• state를 하나로 묶어주는 역할 state를 바꿀 때는 action을 dispatch해서 reducer에서 바꾼다.
• Redux와의 차이점 : Redux는 state를 동기적으로 바꾸는데 반해, reducer는 비동기적으로 바꾼다.

Context API

• props를 넘겨줄 때 부모와 자식 관계가 깊어질 수록 전달하는 것이 힘들어짐.
• 그것을 해결하기 위한 API

state를 바꾸고자 할 때 props로 받은 dipatch로 부모 컴포넌트에 액션을 보내는 방식 대신 Context API로 바로 보내는 방식을 사용할 것.

 

MineSearch.jsx

import React from 'react';
import MineTable from "./MineTable";
import {useReducer} from "react/index";
import Form from "./Form";

const initalState = {
    tableData: [],
    timer: 0,
    result: '',
}

const reducer = (state, action)=>{
    switch (action.type){
        default:
            return state;
    }
}
const MineSearch = () => {
    const[state,dispatch]=useReducer(reducer(), initalState);

    return (
        <>
            <Form />
            <div>{state.timer}</div>
            <MineTable />
            <div>{state.result}</div>
        </>
    );
};

export default MineSearch;

 

Form.jsx

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

const Form = () => {
    const [cell,setCell]=useState(10);
    const [row,setRow]=useState(10);
    const [mine,setMine]=useState(20);

    const onChangeRow = useCallback(e=>{
        setRow(e.target.value);
    },[]);

    const onChangeCell = useCallback(e=>{
        setCell(e.target.value);
    },[]);

    const onChangeMine = useCallback((param) => (e)=>{
        console.log(param);
        setMine(e.target.value);
    },[]);

    const onClickButton = useCallback(()=>{

    },[]);

    return (
        <div>
            <input type="number" placeholder="세로" value={row} onChange={onChangeRow}/>
            <input type="number" placeholder="가로" value={cell} onChange={onChangeCell}/>
            <input type="number" placeholder="지뢰" value={mine} onChange={onChangeMine(1)}/>
            <button onClick={onClickButton}>시작</button>
        </div>
    );
};

export default Form;

 

MineTable.jsx

import React from 'react';

const MineTable = () => {
    return (
        <table>
            
        </table>
    );
};

export default MineTable;

 

MineTr.jsx

import React from 'react';

const MineTr = () => {
    return (
        <div>
            
        </div>
    );
};

export default MineTr;

 

MineTd.jsx

import React from 'react';

const MineTd = () => {
    return (
        <div>
            
        </div>
    );
};

export default MineTd;