useState로 배열, 객체의 값 변경(체크박스 구현)

ReactNative, Nest.js 등에서 useState의 state, setState로 배열([]) 혹은 객체({})의 값 변경

 

배열의 값([]) 변경

배열의 값 변경에 실패하는 경우

  const [checkList, setCheckList] = useState<boolean[]>([]);
  
  ...
  
  /**
   * 체크박스 handler
   * @param e: React.ChangeEvent<HTMLInputElement>
   */
  const onCheckHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    let changeList = checkList; // 배열의 주소를 공유하게 된다.
    changeList[Number(e.target.id)] = true; // 객체의 주소를 공유하기 때문에 원본의 내용도 함께 바뀐다.
  
    // setState는 기존값과 변경된 값을 비교해서 값이 다를 때만 작동하는데, 
    // 위에서 값이바꿨기 때문에 아래코드는 작동하지 않는다.
    setCheckList(changeList); 
  };

 

배열의 값 변경에 성공하는 경우

const onClickEdit = (event: any)
  const [checkList, setCheckList] = useState<boolean[]>([]);
  
  ...
  
  /**
   * 체크박스 handler
   * @param e: React.ChangeEvent<HTMLInputElement>
   */
  const onCheckHandler = (e: React.ChangeEvent<HTMLInputElement>) => { 
    const changeList = checkList;
    changeList[Number(e.target.id)] = true; 
    
    // Spread(스프레드)를 사용, 새로운 배열(새로운 주소)가 만들어진다.
    setCheckList([...aaa]); 
  };

 

이를 활용해 setState로 배열([])값을 변경하여 체크박스를 클릭 Handler를 구현할 수 있다.

  const [checkList, setCheckList] = useState<boolean[]>([]);
  
  ...
  
  /**
   * 체크박스 handler
   * @param e: React.ChangeEvent<HTMLInputElement>
   */
  const onCheckHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    let changeList = checkList;
    changeList[Number(e.target.id)] = e.target.checked;
    setCheckList( [...changeList ]);
  };

 

 

객체의 값({}) 변경

객체의 값은 아래 코드처럼 Spread하여 변경 시켜주면 된다.

setCheckList({ ...checkList, [e.target.id]: e.target.checked });

 

출력값 

{e.target.id1: e.target.checked1, e.target.id2: e.target.checked2, ...}

 * e.target.id = 클릭 된 체크박스의 id

 * e.target.checked = 클릭 여부 (true면 false로 false면 ture로 변경)