React - Redux

리액트에서 redux를 사용하지 않는 경우

• 먼저 예제를 통해 react에서 redux를 사용하지 않는 경우를 살펴 보자.
• 아래의 코드를 보면 App컴포넌트에서 A컴포넌트를 불러오고, A컴포넌트에서는 B컴포넌트를 불러 오고 있다.
• 그러면 App컴포넌트의 state를 B컴포넌트에서 사용하고 싶다면 어떻게 해야 할까?
• 아래 코드와 같이 props drilling을 통해 props를 내려줘야 한다.
• 아래의 코드는 컴포넌트가 단순하여 복잡함을 느끼기 어렵지만 만약 아래와 같은 방식으로 1만개의 컴포넌트가 있다고 가정해 보면 너무나 복잡해 질 것이다.

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>
  )
}

• 이번에는 B컴포넌트에 버튼을 만들어 해당 버튼을 클릭하면 number가 1이 증가되도록 할려면 어떻게 해야 할까?
• App컴포넌트에서 B컴포넌트 까지 number를 증가시킬 수 있는 함수를 내려 주고, B컴포넌트의 버튼에 해당 함수를 onClick이벤트에 전달하면 된다.
• 이것 역시 만약 컴포넌트가 1만개 라면 너무나 복잡한 일이 될 것이다.

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를 사용하는 경우

• react-redux는 Provider, useSelector, useDispatch를 제공을 한다.
• Provider는 Provider로 감싸진 컴포넌트들을 store에 저장된 state값을 사용할 수 있게 하고, 업데이트도 할 수 있게 해주는 역할을 한다. Provider에게는 props로 만들어 둔 store를 전달 해야 한다.
• useSelector는 store에 저장된 state를 불러 올 수 있게 해준다.
• useDispatch는 store에 저장된 state를 업데이트 해 주는 역할을 한다.

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>
  )
}

• 이렇게 redux를 사용 하면 props drilling 없이 쉽게 state를 사용하고 업데이트 할 수 있게 된다. 😀