전 후 값으로 변경하는 버튼 (배열 안에서 전 후 값으로 이동하기)

버튼 클릭시 전 후 값으로 상태값을 변경시키는 부분 -> 컴포넌트로 만들었다.

export default function MoveCategoryButton({
  moveType,
  category,
  setCategory,
}) {
  // 카테고리 전체
  const categories = ['apple', 'banana', 'grape'];

  // 버튼 클릭시 이벤트 발생
  const changeCategory = (type) => {
  
    // 현재 카테고리의 index 값을 찾는다
    const currentVaule = categories.indexOf(category);
    
    // 배열상에서 인덱스 상으로 전 후에 있는 값을 찾는다.
    const nextVaule = categories[currentVaule + 1];
    const prevValue = categories[currentVaule - 1];

    // onClick의 인자값으로 moveType을 전달하면 이를 받아서
    // 전 후 중 어디로 이동할 것인지 판단한다.
    if (type === 1) {
      // 후로 이동
      if (categories.at(-1) === categories[currentVaule]) {
      // 현재값이 배열상 마지막 값인 경우 배열의 첫번째 값을 다음 카테고리로 설정함
        setCategory(categories[0]);
      } else {
      // 다음으로 넘어감
        setCategory(nextVaule);
      }
    } else if (type === 0) {
      // 전으로 이동
      if (categories[0] === categories[currentVaule]) {
        // 현재값이 배열상 첫번째 값인 경우 배열의 마지막 값을 다음 카테고리로 설정함
        setCategory(categories.at(-1));
      } else {
      // 이전으로 돌아감
        setCategory(prevValue);
      }
    }
  };

  return (
    <div
      onClick={() => { changeCategory(moveType); }}
    />
  );
}

1. 배열의 index 값 알아내기

arr.indexOf(value)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

 

 

2. 배열의 마지막 값 알아내기

인덱스가 아닌 value를 리턴함

arr.at(-1)

마지막에서 첫번째 요소에 접근한다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at

 

 

+ 230531 추가

3. categories 배열 props로 전달 받기

-> 재사용에 용이하도록 props로 categories 배열을 받는것이 좋겠다.