React Array Toggle Element (리액트 배열 값 토글하기!)

REACT

짧지만 직접 짠 코드입니다.

사용하신다면 좋아요 댓글 부탁드려요. 헤헤

<Button onClick={
            () => myArray.indexOf('elemA')>-1 ? setMyArray(myArray.filter((item)=>item!='elemA')) : setMyArray([...myArray, 'elemA'])
        }>
        토글버튼
        </Button>

---

설명:

REACT의 배열은 Push, Pop 등 변화를 주는 Method는 일체 사용 불가. (불변성의 법칙)

다행히도 indexOf 와 같이 조회하는 용도의 함수는 사용이 가능하다.

따라서 원소의 추가와 삭제는 기존 배열에 변화를 주지 못하고, 새로운 배열을 만들어서 대입해야한다.

 

원소 삭제:

myArray.filter((item) => item!='elemA')

배열에 filter를 돌려서 'elemA'이 없는 배열을 새로 만들어 기존 배열에 바꿔치기 하는 방법이다.

즉, 원래 배열에 변화를 주는게 아니라, 새로운 배열을 만든 것.

 

원소 추가:

[ ...myArray, 'elemA' ]

새로운 빈 배열을 만들고, 기존 배열을 넣어준 후, 거기에 'elemA'를 추가해서 완성시킨다.