useState에서의 Array(배열) 데이터 수정·추가 방법

요구사항

• 초기화면은 모두 down이어야함
• 4개의 down 버튼 중 하나를 누르면 up으로 변함
• 다른 down 버튼을 누르면 해당 버튼은 up으로 변하고 나머지 버튼은 down으로 변함

1. 우선 value로 false값을 가진 배열을 useState로 선언한다.

amount는 props으로 받아온 숫자형 데이터값입니다. ex) 4

const [myArray, setMyArray] = React.useState(
    Array(amount).fill({ value: false }),
  );

2. 해당 배열을 렌더링하여, value값에 따라 down, up으로 변하는 조건문을 만들어준다.

const myLi = myArray.map((data, index) => (
    <li key={data.id}>
      <div
        role="button"
        tabIndex={0}
        // 클릭이벤트를 설정한다. 인자값으로 해당 index값 투입.
        onClick={() => clicked(index)}
        onKeyDown={() => clicked(index)}
      >
        {data.value === false ? 'down' : 'up'}
      </div>
    </li>
  ));

  return (
    <div>
      <ul>{myLi}</ul>
    </div>
  );

3. 원하는 index의 value값을 true로 그 외는 false로 바꿔주는 함수 구현하기.

function clicked(index) {
    // 원하는 값으로 업데이트된 배열을 새로운 변수로서 setuseState하기
    const newArray = myArray.map((item, i) => {
      if (i === index) {
        return { ...item, value: true };
      }
      return { ...item, value: false };
    });
    setMyArray(newArray);
  }

[참고] 배열 추가 방법

// 배열 맨 뒤에 {value: false} 라는 값이 추가됩니다.
setMyArray([...newArray, {value: false}]);

 

전체코드는 다음과 같습니다.

import React from 'react';
import PropTypes from 'prop-types';

function About({ amount }) {
  // 1. 우선 value로 false값을 가진 배열을 useState로 선언
  const [myArray, setMyArray] = React.useState(
    Array(amount).fill({ value: false }),
  );
  // 3. 원하는 index의 value값을 true로 그 외는 false로 바꿔주는 함수 구현
  function clicked(index) {
    const newArray = myArray.map((item, i) => {
      if (i === index) {
        return { ...item, value: true };
      }
      return { ...item, value: false };
    });
    setMyArray(newArray);
  }
  // 2. 해당 배열을 map으로써 렌더링하며, value값에 따른 down과 up의 조건식 구현
  const myBtn = myArray.map((data, index) => (
    <li key={data.id}>
      <div
        role="button"
        tabIndex={0}
        // 클릭이벤트를 설정한다. 인자값으로 해당 index값 투입.
        onClick={() => clicked(index)}
        onKeyDown={() => clicked(index)}
      >
        {data.value === false ? 'down' : 'up'}
      </div>
    </li>
  ));

  return (
    <div>
      <ul>{myBtn}</ul>
    </div>
  );
}

About.propTypes = {
  amount: PropTypes.node.isRequired,
};

export default About;