[React] React에서 객체 상태를 관리할 때 팁

React에서 useState로 객체를 관리, 변경할 때 문법적 팁

이번 포스팅에서는 React로 객체 state를 관리할 때 유용한 문법적 팁을 작성하고자 한다. React에서 객체를 관리해야 할 일은 생각보다 많은데, 객체로 관리를 하면 각각의 독립적인 state를 관리하는 것 보다 코드와 로직이 간결해지는 경우가 많기 때문이다. 이 때 사용할 수 있는 유용한 문법이 있는데, 밑의 코드를 참고하여 알아보자.

위 코드를 보면 useState를 사용하여 userInput이라는 객체를 초기화해준다. 그 밑의 handleChange함수에서는 이 객체를 update할 수 있게 하는데 이 함수는 매개변수로 업데이트할 객체의 key와 value를 받는다. 이후 함수형 업데이트를 사용해 이전 상태를 기반으로 새로운 상태를 계산한다. ...prevUserInput으로 이전 상태의 모든 속성을 복사하고, [inputIdentifier]: newValue를 사용하여 지정된 inputIdentifier에 해당하는 속성을 업데이트한다. 이렇게 함으로써, handleChange를 호출할 때마다 해당하는 입력값만 업데이트 되고 나머지는 이전 상태를 그대로 유지하게 된다. 이런 식으로 코드를 짰을때 얻을 수 있는 장점으로는 객체를 한 번에 관리함으로써 여러 부가적인 코드를 작성할 필요가 없고, 또한 객체 중 원하는 하나의 속성만 업데이트 되고 나머지는 그대로 유지되는 동적인 상태 관리를 할 수 있게 된다.

결론

React에서 객체를 state로 관리해야 하는 경우에 유용하게 쓸 수 있는 방식으로, 특히 객체 중 하나의 속성만 변경하고 나머지 속성은 그대로 유지하고 싶을 때 사용한다면 좋을 코드이다.