React - state 변경하는 법

리액트에서 state를 변경하는 방법에 대해서 공부해보겠습니다. 

 

리액트에서 state를 변경할 때는 useState를 통해 데이터를 담을 때 같이 생성되는 변경에 사용되는 함수를 이용하면 됩니다.

 

let [a, b] = useState('저장할 데이터');

 

a에는 저장할 데이터가 담기고 b에는 저장할 데이터를 변경하는 함수가 담긴다고 했습니다. state를 변경할 때는 b를 활용하면 됩니다.

 

 

<Example>

let [a, b] = useState(0);


<button onClick= { ()=>{ b(a+1) } }>증가</button>
<h3> { a } </h3>

 

 

 

useState함수를 이용해서 초기 state에 0을 넣었습니다. 그리고 버튼을 클릭할 때마다 이 숫자가 하나씩 커지게 하고 싶습니다. HTML에서 이벤트리스너를 주듯이 JSX에서도 사용할 수 있습니다. 다만 onclick이 아니라 onClick이라는 것에 주의하시기 바랍니다.

 

주고싶은 이벤트를 주고 중괄호 안에 함수를 넣어줘야 합니다. 반드시 꼭 함수가 들어가야 합니다. (화살표 함수도 상관없습니다) 그리고 함수 안에는 state를 만들 때 자동으로 만들어지는 state 변경함수를 이용해서 값을 바꿔주면 됩니다.

 

위 코드 예제를 보면 화살표 함수를 이용하고 있고 state 변경함수가 b이므로 b( ) 이렇게 사용하고 있는 것을 확인할 수 있습니다. a+1 이라는 것은 기존의 a에다가 1을 계속 더해주겠다는 의미입니다. 

 

 

 

🔥 state 변경하는 법 심화!

 

function App() {
  let [item, setItem] = useState(['우동', '햄버거', '갈비']);
  
  const changeItem = () => {
        const newItem = [...item];
        newItem[0] = '라면';
        setItem(newItem);
      }
      
  return (
     <button className="changeBtn" onClick={ changeItem }>변경</button>
  ...
  )
}

 

요구조건: 변경이라는 버튼을 눌렀을 때 state의 첫번째인 '우동'을 '라면'으로 바꿔주세요.

 

⭐️ state를 변경할 때는 항상 state 변경함수를 사용해야된다는 사실을 잊으시면 안 됩니다. 

 

1. const changeItem = () => {
        const newItem = [...item];
        newItem[0] = '라면';
        setItem(newItem);
      }

 

이런 코드를 작성했습니다. 이유를 하나하나 알아보도록 하겠습니다.

 

(1) 함수를 따로 만든 것은 나중에 함수를 onClick = { 함수 } 라는 코드를 작성하고 함수 자리에 넣기 위함입니다. 함수를 따로 만들어 놓으면 button 코드를 작성할 때 함수 이름만 넣으면 되기 때문에 간결하게 쓸 수 있다는 장점이 있기 때문입니다. 

 

(2) 함수 안을 들여다보면  const newItem = [...item]; 라는 것이 보입니다. 이 코드는 기존의 state가 담겨있던 array를 newItem 이라는 새로운 array에 deep copy한 것이라 할 수 있습니다. ES6 문법인 spread operator를 활용했네요.

 

(3) 새로 만든 array의 0번째 자료를 '라면'으로 수정했습니다.

 

(4) 새로 만든 newItem을 state 변경함수인 setItem()안에 넣었습니다. state 변경함수를 이용하여 state를 변경할 때는 useState를 사용할 때 들어갔던 state의 모습과 유사한 것을 state 변경함수 안에 넣어야 합니다. 위의 코드를 예로 들어서 설명하자면 useState를 통해 state를 만들 때 array 자료 안에 담았으므로 setItem으로 state를 바꿀 때도 array 자료를 사용하는 것입니다.

 

 

2.  <button className="changeBtn" onClick={ changeItem }>변경</button>

 

onClick = { 함수 } 에서 함수 자리에 미리 만들어 놓은 changeItem 함수를 넣어줬습니다. 

 

 

요약하자면

❶  수정하고 싶은 state의 deep 카피본을 하나 생성합니다. 

❷  카피본을 입맛에 맞게 수정합니다. 

❸  카피본을 state변경함수()에 집어넣습니다.