06. Component State Handle
함수형 컴포넌트에서는 컴포넌트 내부의 데이터를 사용하고, handle하기 위해서 useState라는 Hook을 사용한다.
useState를 사용하면, 현재의 원소상태와, 이 원소를 수정할 수 있는 setter가 주어진다.
const [keyword, setKeyword] = React.useState("");useState 안에 들어가 있는 값은 해당 value의 초기값에 해당된다.
우리가 정한 setter를 통해 value를 수정할 수 있다.
setter를 사용하는 방법은 두 종류로, 새로운 value를 그대로 넣어주는 방법과, 함수를 넣어주는 방법이 있다.
자세한 설명은 공식문서인 https://ko.reactjs.org/docs/faq-state.html 여기에 잘 설명되어 있다.
새로운 value를 넣어주는 방식은 setState의 특성상 연속되는 state의 값 변경을 즉각적으로, 사용하지 못한다는 단점이 있다.
왜냐하면 위의 공식설명서에서도 나와있듯이, state의 값은 즉각적으로 변화하는 것이 아니기 때문에, 이전 상태값을 가져오지 못하는 경우가 발생한다.
그렇기 때문에, 과거의 값을 활용하여, 새로운 작업을 할때에는, 새로운 값을 바로 넣어주는 것보다, 함수를 통해 값을 변화시켜주는 것이 더 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Static Template</title>
</head>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const rootElement = document.querySelector("#root");
const App = () => {
const [count, setCount] = React.useState(0);
function handleIncrease() {
setCount((count) => count + 1);
}
function handleDecrease() {
setCount(count - 1);
}
function handleDoubleIncrease() {
handleIncrease();
handleIncrease();
}
function handleDoubleDecrease() {
handleDecrease();
handleDecrease();
}
return (
<div>
<h1>{count}</h1>
<button onClick={handleIncrease}>+</button>
<button onClick={handleDoubleIncrease}>2+</button>
<button onClick={handleDecrease}>-</button>
<button onClick={handleDoubleDecrease}>2-</button>
</div>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</html> - 위 코드를 실행해보면 알지만, 2번 연속으로 더해주는 것은 정상작동하는 것에 반해, 2번연속 값을 내리는 것은 작동안하는 것을 알 수 있다.
'기술공부 > React' 카테고리의 다른 글
| [React] 08. Custom Hook (0) | 2021.12.23 |
|---|---|
| [React] 07. Component Side Effect (0) | 2021.12.22 |
| [React] 05. event handler (0) | 2021.12.15 |
| [React] 04. rerendring (0) | 2021.12.14 |
| [React] 03.JSX (0) | 2021.12.10 |