[ 리액트(React) ] 함수로 전달해주는 인자가 3개 이상일 때, 객체로 묶어서 전달하기

📍 함수로 전달해주는 인자가 3개 이상일 때, 객체로 묶어서 전달하기

함수로 넘겨주는 인자가 3개 이상이면, 객체 하나로 묶어 가독성이 좋아지게끔 하자. 다음 링크는 JS 클린 코드 지침서를 한국말로 번역한 깃허브링크이다. 어떻게 코드를 짜야할지 감이 오지 않는다면 다음 링크를 참고하자. Robert C. Martin's - Clean Code 한글 번역판 함수(Functions)

 

예를 들어, defaultScore 객체에 str, dex, int, luck의 능력치가 들어있는데 버튼을 클릭 할 때마다 능력치를 올라가게 설정하려고 한다면, 다음과 같이 작성할 수 있다. 여기서 중요한 점은 quizScore에서 인자를 하나하나 따로 떼어서 받는게 아니라 전체를 묶어서 보낸다는 점이다. 이후에 함수 안에서 변수를 따로 설정하는 과정이다.

// src/pages/score/Constant.js
const defaultScore = {
  stats: {
    str: 0,
    dex: 0,
    int: 0,
    luck: 0,
  },
};

// src/components/App.js
const App = () => {
  const [score, setScore] = useState(defaultScore);

  const quizScore = (defaultScore) => {
    const str = defaultScore.stats.str;
    const dex = defaultScore.stats.dex;
    const int = defaultScore.stats.int;
    const luck = defaultScore.stats.luck;

    setScore = (score) => ({
      ...score,
      stat: {
        strScore: score.stats.str + str,
        dexScore: score.stat.dex + dex,
        intScore: score.stat.int + int,
        luckScore: score.stat.luck + luck,
      },
    });
  };
};