사용자가 입력할 수 있는 input 태그의 상태를 관리하는 방법을 다루어 보겠다.
input 상태 관리하기
input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 의 값이 비워지도록 구현하였다.
InputSample.js
import React, { useState } from 'react';
function InputSample() {
const [text, setText] = useState('');
const onChange = (e) => {
setText(e.target.value);
};
const onReset = () => {
setText('');
};
return (
<div>
<input onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>
<div>
<b>값: {text}</b>
</div>
</div>
);
}
export default InputSample;App.js
import React from 'react';
import InputSample from './InputSample';
function App() {
return (
<InputSample />
);
}
export default App;
기본 증감 코드 (+1, -1)
import React, {useState} from "react";
import logo from './logo.svg';
import './App.css';
function App() {
const [count, setCount] = useState(0)
const add = () => {setCount(count + 1)}
const minus = () => {setCount(count - 1)}
return (
<div>
<h1>Im a class {count}</h1>
<button onClick={add}>PLUS</button>
<button onClick={minus}>MINUS</button>
</div>
);
}
export default App;
여러개의 input 상태 관리하기
input 의 개수가 여러개가 됐을때는, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 할 수 있다. 하지만 그 방법은 가장 좋은 방법은 아니다. 더 좋은 방법은 input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것이다. 그리고 useState 에서는 문자열이 아니라 객체 형태의 상태를 관리해주어야 한다.
import React, { useState } from 'react';
function InputSample() {
const [inputs, setInputs] = useState({
name: '',
nickname: ''
});
const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
const onChange = (e) => {
const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤 <- Point!
[name]: value // name 키를 가진 값을 value 로 설정
});
};
const onReset = () => {
setInputs({
name: '',
nickname: '',
})
};
return (
<div>
<input name="name" placeholder="이름" onChange={onChange} value={name} />
<input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
<button onClick={onReset}>초기화</button>
<div>
<b>값: </b>
{name} ({nickname})
</div>
</div>
);
}
export default InputSample;리액트 상태에서 객체를 수정해야 할 때에는
inputs[name] = value;
이런식으로 직접 수정하면 안된다.
그 대신에, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 한다.
=> 기존에 있던 상태 대신 새로운 객체를 만들어 이를 상태로 사용한다.(기존의 상태는 버림)
setInputs({
...inputs,
[name]: value
});여기서 사용한 ... 문법은 spread 문법이다. 객체의 내요을 모두 "펼쳐서" 기존 객체를 복사해준다. 이러한 작업을 "불변성을 지킨다" 라고 부른다. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고, 이에 따라 필요한 리렌더링이 진행된다. 만약에 input[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않는다.
추가적으로, 리액트에서는 불변성을 지켜주어야만 컴포넌트 업데이트 성능 최적화를 제대로 할 수 있다.
컴포넌트 업데이트 성능 최적화
setState는 shouldComponentUpdate(nextProps, nextState)를 트리거하는데, 이 메서드의 boolean 반환값에 따라 render 호출 여부가 결정된다. 이 메서드를 재정의하지 않으면 setState 호출 시마다 render가 호출된다.
위 글에서 말하는 "최적화"는 유저가 shouldComponentUpdate 재정의를 통해 render 호출 여부를 결정하는 것을 말한다.
shouldComponentUpdate(nextProps: Props, nextState: State) {
for (const [key, value] of Object.entries(nextState)) {
if (typeof value != "object") {
if (this.state.isLoading != nextState.isLoading) {
return true;
}
}
else {
// codes for deep comparison here depending on your case
}
}
return false;
}state를 왜 immutable(불변)하게 다뤄야 하는가
React는 개발자가 호출한 setState 로 특정 state의 값이 실제로 변경되기 전에 shouldComponentUpdate 를 호출시켜 개발자로 하여금 해당 state의 기존 값과 새로운 값을 비교하여 render 호출 여부를 결정하도록 기회를 준다.
그런데 만약에 기존 값을 개발자가 setState 의 shouldComponent 가 트리거 되기 전에 직접 바꿔버리면, 이후 호출된 shouldComponentUpdate 가 바뀐 기존값과 새로운 값이 같다고 판단해서 리렌더링을 하지않는다. 따라서 리렌더링이 일어나지 않아 state 가 바뀌어도 알아볼 수 없는 것이다.
- setState 호출
- shouldComponentUpdate 를 트리거
- state의 기존 값과 새로운 값을 비교
- 같다면 false 반환, 다르다면 true 반환
- 반환값이 false 면 기존 state 값 변경X, true 면 기존 state 값을 새로운 state 값으로 변경 & 리렌더링
만약 다음과 같은 state set이 있고 shouldComponentUpdate를 통해 incremental의 변경에 대해 최적화한다고 하자.
state = {
incremental: 0,
...
};incremental을 다음과 같은 방식으로 변경한다면
this.setState({
incremental: ++incremental//직접 변경, shouldComponentUpdate가 호출되기 전에 이미 기존 값이 바뀜
//기존 객체(내부의 incremental)를 수정한 것으로 볼 수 있음
});위의 setState 호출 후 바로 호출될 개발자가 정의한 shouldComponentUpdate에서 현재 incremental값이 변경될 값과 동일하기 때문에 변경점을 찾지 못할 것이고 결국 false를 반환하게 될 것이다.
결론적으로 state를 immutable하게 취급하라는 이유는 위의 예시와 같이 다른 lifecycle 메서드들에서 개발자가 값을 직접 지정한 state에 대해 참조가 일어날 때 컴포넌트 전체 로직이 깨질 여지가 있기 때문이다. 따라서 React는 React가 해당 state를 변경하기 전까지 개발자가 현재 state 값을 지정하지 않기를 권장한다.
결론: 리엑트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 한다.
