리액트를 썼을 때 좋은 점은 바뀐 곳만 reRender한다는 것이다. 이 때 reRender하도록 값의 변경을 감지할 수 있도록 하는 것이 useState()이다.
useState(n)를 하게 되면 [n, function] 형태의 배열을 반환한다.
자바스크립트 문법중에 배열의 값들을 다른 변수에 할당하는 문법이 있다.
예를 들어
x = [1, 2, 3] 이라는 배열이 있고 1,2,3을 a, b, c라는 변수에 담고 싶다면 a = x[0] 이런식으로 하는 방식도 있지만
const [a, b, c] = x; 이렇게 하는 방식도 있다.
이를 활용하여 useState();를 변수에 바로 할당하면 const [counter, modifier] = React.useState(0); 이런식으로 쓸 수 있다.
modifier 함수는 counter의 값을 변경하고 리렌더링 할 수 있게 해주는 함수다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>정리하면 setCounter라는 modifier 함수가 실행되면 state값이 변하게 되고 state값의 변화로 컴포넌트가 재생성 되는데, 이 때 새로운 counter 값으로 바뀐 상태로 rerendering 된다는 것이다.
이런식으로 값의 변경을 감지해서 ui를 refresh 하기 위해 사용하는 것이 리액트이다.
'취업 준비 > React' 카테고리의 다른 글
| 6. Props (0) | 2022.03.08 |
|---|---|
| 5. 컴포넌트 조합하기 (0) | 2022.03.08 |
| 4. State 예제 - 시/분 변환기 (0) | 2022.03.05 |
| 2. JSX 문법 (0) | 2022.03.04 |
| 1. JS vs React (0) | 2022.03.04 |
