useReducer 훅과, 거기로 불려갈 콜백함수의 파라미터 action, state

(10-08 useReducer 공부중...)

St2veK: @workspace /explain  27~39줄에 작성된 함수에 대해서, 해당 함수는 useReducer()훅에 콜백함수로 쓰이게 되는데, 이때 useReducer가 내부적으로 해당 콜백 함수에게 파라미터 2개를 주입해주기 때문에, 그렇게 쓰기 위해서 해당 함수는 파라미터를 2개 받는건가?
일단 각각 state, action 이라고 파라미터를 주었는데, 이렇게 파라미터 명을 지은 이유는, action 값에 의해서 state를 바꾸려고 하기 때문인데, 그러한 관점에서 봤을 때, 파라미터명을 지은 네이밍 센스에 대해서도 의견을 듣고 싶어.

 

 

Workspace: 네, 맞습니다. `useReducer` 훅은 내부적으로 콜백 함수에게 두 개의 파라미터를 주입합니다. 첫 번째 파라미터는 현재 상태(state)이고, 두 번째 파라미터는 액션(action)입니다. 따라서 setCounterValue 함수는 두 개의 파라미터를 받아야 합니다. 파라미터 명을 state와 action으로 지은 것은 매우 적절합니다. state는 현재 상태를 나타내고, action은 상태를 변경하기 위한 명령을 나타내기 때문에, 이러한 네이밍은 함수의 역할을 명확하게 이해하는 데 도움이 됩니다.

다음은 `useReducer` 훅을 사용하는 예제입니다:

javascript
import React, { useReducer } from 'react';

const initialState = 0;

function setCounterValue

(state

, action) {
  console.log("[%o] %o", action, state);

  switch(action) {
    case 'HELLO':
      return state + 1;
    case 'WORLD':
      return state - 1;
    default:
      return 0;
  }
}

function Counter() {
  const [count, dispatch] = useReducer(setCounterValue, initialState);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch('HELLO')}>Increment</button>
      <button onClick={() => dispatch('WORLD')}>Decrement</button>
    </div>
  );
}

export default Counter;

이 예제에서 `useReducer`는 setCounterValue 함수를 호출할 때 state와 action을 전달합니다. state는 현재 카운터 값이고, action은 'HELLO' 또는 'WORLD' 문자열입니다. 이처럼 state와 action이라는 파라미터 명은 함수의 동작을 명확하게 설명해줍니다.

 

 

St2veK: useReducer 훅이 내부적으로 주는 파라미터 2개 명이 원래 action 과 state 인 것인가?

 

 

GitHub Copilot: `useReducer` 훅이 내부적으로 주는 두 개의 파라미터는 state와 action입니다. 이 명칭은 개발자가 자유롭게 정할 수 있지만, 일반적으로 state와 action이라는 이름을 사용합니다. 이는 `useReducer`의 동작을 이해하기 쉽게 하기 위한 관례입니다.

`useReducer` 훅의 시그니처는 다음과 같습니다:

javascript
const [state, dispatch] = useReducer(reducer, initialState);

 

여기서 `reducer` 함수는 두 개의 파라미터를 받습니다:

javascript
function reducer(state, action) {
  // 상태 업데이트 로직
}

따라서 `useReducer` 훅을 사용할 때, `reducer` 함수의 첫 번째 파라미터는 현재 상태(state), 두 번째 파라미터는 액션(action)입니다. state와 action이라는 이름은 관례적으로 사용되는 이름일 뿐, 다른 이름을 사용할 수도 있습니다. 하지만 state와 action이라는 이름을 사용하면 코드의 가독성이 높아집니다.

 

 

St2veK: 하긴, 파라미터 명 자체는 개발자가 무엇으로 잡든지 상관이 없는 것이지?

 

 

GitHub Copilot: 네, 맞습니다. 파라미터 명 자체는 개발자가 무엇으로 정하든 상관없습니다. 하지만 일반적으로 state와 action이라는 이름을 사용하는 것이 관례입니다. 이는 코드의 가독성을 높이고, 다른 개발자들이 코드를 이해하는 데 도움이 됩니다.

예를 들어, 다음과 같이 파라미터 이름을 변경할 수도 있습니다:

javascript
function setCounterValue(currentState, actionPayload) {
  console.log("[%o] %o", actionPayload, currentState);

  switch(actionPayload) {
    case 'HELLO':
      return currentState + 1;
    case 'WORLD':
      return currentState - 1;
    default:
      return 0;
  }
}

이처럼 파라미터 이름을 변경해도 함수의 동작에는 영향을 미치지 않습니다. 중요한 것은 함수의 로직이 올바르게 동작하는 것입니다.