TIL 46 day spread 연산자와 체크박스

spread연산자에 대해서는 이전에도 한번 쓴 적이 있는 것같다. 하지만 왜 또 쓰느냐?! 이전까지는 spread 연산자의 존재만 알 뿐 딱히 써본적이 없다. 일단 쓰는 것이 익숙치 않아 생각이 나지 않고 쓸 일도 없었다.
하지만 이번에 체크박스 구현을 하면서 spread 연산자를 이용할 일이 있어서 간단한 예시과 함께 포스팅을 하려고 한다.

spread연산자는 배열과 객체에 사용 할 수 있다.
1) 배열 (es6)

const number = [1, 2, 3];
const newNumber = [ ...number, 4, 5, 6]; 
console.log(newNumber); // output : [ 1, 2, 3, 4, 5, 6 ];

2) 객체 (es9)

const user = {
  name: 'winney',
  address: 'seoul'
};

const addInfoUser = {
  ...user,
  position: 'front'
}
console.log(addInfoUser) 
// output : { name: 'winney', address: 'seoul', position: 'front' }

const changeInfoUser = {
  ...user, 
  address: 'busan'
}
console.log(changeInfoUser)
//output : { name: 'winney', address: 'busan' }

체크박스

전체동의 체크박스 하나와 3개의 체크박스를 만들예정이었다.
처음에는 하나의 체크박스를 하나의 state로 관리하려고 하다가 유지, 보수를 하지게 적절치 않다는 생각과 함께 map으로 컴포넌트를 돌리려고 Mock data를 만들면서 객체를 사용해야겠다는 생각이 들었다.

처음에 전혀 감을 못 잡아서 멘토님의 도움을 받아서 작성을 했고 사실상 대부분 멘토님이 작성하셨다. 다시 보지 않고 작성하는 연습과 함께 spread 연산자를 사용하게 되어 코드를 남겨보고자 한다.

const EXPLANATIONS = [
  {
    id: 1,
    name: "first",
    explanation: "내용1",
    isChecked: false,
  },
  {
    id: 2,
    name: "second",
    explanation: "내용2",
    isChecked: false,
  }
]

const [isChecked, setIsChecked] = useState([...EXPLANATIONS])

//개별 체크박스
const handleCheckBox = () => {
	let newChecked = isChecked;
	newChecked[index].inChecked = !isChecked[index].inChecked
    setIsChecked([...newChecked])
}

여기서는 개별체크 박스 함수만 작성했지만 실제 코드에서는 전체동의 체크박스도 비슷하게 작성되었다.
여전히 배열과 객체를 다루는게 어색하고 어려워서 spread 연산자를 자유롭게 쓰는 때가 언제가 될까 싶지만 이렇게 한 번이라도 더 쓰고 익숙해지면 빠르게 그 날이 오지 않을까 싶다.