[React] 이벤트 핸들러 객체 속성값 변경하기

개요

객체에서 특정 key의 value값을 변경시켜야 하는데
if문으로 조건문을 걸다보니 반복되는 코드가 발생했다
함수를 이용해서 코드를 줄여보기로 했다

예제

const [state, setState] = useState({
	obj: {
    	a: 1, 
        b: 2,
        c: 3,
    },
});

obj 객체의 c 속성의 값을 30으로 변경하기

1. 이벤트 핸들러 함수 호출

<button onClick={() => handleClick({ c: 30 })}>버튼</button>

2. 함수 실행

❖ 방법 1

  const handleClick = num => {
    let key = Object.keys(num)[0];
    let value = Object.values(num)[0];
    setState({
      ...state,
      obj: {
        ...state.obj,
        [key]: value,
      }
    })
  };

❖ 방법 2

const handleClick = num => {
  let key = Object.keys(num)[0];
  setState({
    ...state,
    obj: {
      ...state.obj,
      [key]: num[key],
    }
  })
};

useEffect를 이용하여 결과를 확인해보면 제대로 변경되었다

useEffect(() => {
  console.log(state.obj); // {a: 1, b: 2, c: 30}
}, [state.obj]);

a, b, c 동시에 변경하기

1. 이벤트 핸들러 함수 호출

<button onClick={() => handleClick({ a:10, b: 20, c: 30 })}>버튼</button>

2. 함수 실행

❖ 방법 1

const handleClick = num => {
  setState({
    ...state,
    obj: num,
  });
};

// {a: 10, b: 20, c: 30}

❖ 방법 2

하나 또는 동시에 변경하는 경우에는 아래처럼 조건문을 걸었다

const handleClick = num => {
  let key = Object.keys(num);
  if (key.length > 1) { // 동시에 변경하는 경우
    setState({
      ...state,
      obj: num,
    });
  } else { // 하나만 변경하는 경우
    setState({
      ...state,
      obj: {
        ...state.obj,
        [key[0]]: num[key[0]],
      }
    })
  }
};

+ 추가(22.09.22)

방법 2의 코드를 기능에 따라 분리하고
구조 분해 할당 표현식으로 수정하는게 더 가독성 및 유지보수에 좋다

const handleChange = num => {
  const [key, value] = Object.entries(num)[0];
    setState({
      ...state,
      obj: {
        ...state.obj,
        key: value,
      }
    })
};

const handleAllChange = num => {
  setState({
    ...state,
    obj: num,
  });
}