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;'코딩이야기 > 인터넷 강의' 카테고리의 다른 글
| section6 7-5. 테이블 최적화 하기 (0) | 2024.06.17 |
|---|---|
| section6 7-3.action만들어 dispatch하기 (0) | 2024.06.16 |
| 틱택토 개인코드 (0) | 2024.06.14 |
| section6 7-2. reducer, action. dispatch의 관계 (0) | 2024.06.13 |
| section6 7-1. 틱택토와 useRedcuer 소개 (0) | 2024.06.12 |