111일차 - 프로젝트 6일차

어제 작성했던 버튼 버튼 컴포넌트에서 변화가 있었다.

DB에서 받을때 어제는 INTEGER로 생각을 해서 map함수를 짰었는데, DB에서 파일 받는 형식이 달라진 것이다.
DB에서 Array의 형태로 데이터를 받을 것이고 예시를 아래와 같이들겠다.

const arr = [
  { buttonId: 0, isFinished: true },
  { buttonId: 1, isFinished: false },
  { buttonId: 2, isFinished: true },
  { buttonId: 3, isFinished: false },
  { buttonId: 4, isFinished: false },
  { buttonId: 5, isFinished: true },
];

button데이터들에 각각의 id와 완료여부 즉 눌러있는지 안눌러있는지를 판단하는 객체가 들어있는 배열이다.

우선 state를 설정해 보겠다.

const [buttonList, setButtonList] = useState(arr);

state명을 직관적이게 하기 위해서 다음과 같이 바꿨다.
state에 따라서 버튼이 랜더링되게 해야하는데 다음과 같이 만들었다.

우선 스타일드 컴포넌트로 Challengebutton을 만들고 아래와 같이 랜더링 시켰다.

<ChallengeButton
  key={button.buttonId}
  onClick={buttonClick(button.buttonId)}
  isClick={button.isFinished}
  >
    {button.buttonId + 1} 일차
</ChallengeButton>

그리고 buttonClick 함수는 다음과 같이 정의했다.

const buttonClick = key => () => {
    setButtonList(prevState => {
      return prevState.map(button => {
        if (button.buttonId === key) {
          return { buttonId: key, isFinished: !button.isFinished };
        }
        return button;
      });
    });
  };

여기서 setButtonList가 함수를 받는 이유는 setState가 함수를 받으면 현재 state를 참조해서 다음 state를 만드는 값을 리턴해서 state를 변경할 수 있기 때문이다.