리액트에서 redux를 사용하지 않는 경우
export default function App() {
const [number, setNumber] = useState(1)
return (
<div id='container'>
<h1>Root</h1>
<A number={number}/>
</div>
);
}
function A(props) {
return (
<div>
<h1>
A : {props.number}
</h1>
<B number={props.number}/>
</div>
)
}
function B(props) {
return (
<div>
<h1>
B : {props.number}
</h1>
</div>
)
}
export default function App() {
const [number, setNumber] = useState(1)
const increaseNumber = () => {
setNumber(number + 1)
}
return (
<div id='container'>
<h1>Root</h1>
<A number={number} increaseNumber={increaseNumber}/>
</div>
);
}
function A(props) {
return (
<div>
<h1>
A : {props.number}
</h1>
<B number={props.number} increaseNumber={props.increaseNumber}/>
</div>
)
}
function B(props) {
return (
<div>
<h1>
B : {props.number}
</h1>
<button onClick={props.increaseNumber}>숫자 증가</button>
</div>
)
}
리액트에서 redux를 사용하는 경우
import { createStore } from 'react-redux'
import {Provider, useSelector, useDispatch, connet} from 'react-redux'
// 😀 1. reducer함수를 만들고
function reducer (curState, action) {
if(curState === undefined) {
return {
number: 1
}
}
const newState = {...curState}
// 😀 6. dispatch로 보내온 타입에 대한 조건문을 만들어 state를 업데이트 해주면 된다.
if (action.type = 'increase') {
newState.number ++
}
return newState
}
// 😀 2. store에 reducer를 전달한다.
const store = createStore(reducer)
export default function App() {
return (
<div id='container'>
<h1>Root</h1>
<Provider store={store}>
<A />
</Provider>
</div>
);
}
function A() {
return (
<div>
<h1>
A :
</h1>
<B />
</div>
)
}
function B() {
// 😀 3. useSelector는 인자로 콜백 함수를 받고, 해당 함수는 인자로 store에 저장된 state를 받는다.
// 위에서 현재 number라는 state를 지정을 했기 때문에 state.number를 불러 오면 number state를 가져 올 수 있다.
const number = useSelector((state) => state.number)
// 😀 4. useDispatch를 가져온 다음에
const dispatch = useDispatch()
return (
<div>
<h1>
B : {number}
</h1>
// 😀 5. dispatch에 타입을 지정하여 보내주면
<button onClick={() => {
dispatch({type: 'increase'})
}}>숫자 증가</button>
</div>
)
}