#3.0 Understanding State (13:34)
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function countUp() {
counter = counter + 1;
render();
// counter에 1을 더하고 다시 렌더링 해줌.
// 이곳에서 호출하지 않는다면, 페이지가 새로고침 되지 않는 문제 발생
}
function render() {
ReactDOM.render(<Container />, root);
}
function Container() {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
)
}
// 페이지가 로딩될 때 처음 Container를 렌더링
render();
</script>
</html>
JavaScript
복사
•
변수를 연결할 땐 중괄호 사용 {}
•
React.js는 리렌더링 시, UI에서 오로지 바뀐 부분만 업데이트 해준다!
ex) Contaioner를 리렌더링 했으나 Container를 다시 렌더링 하는 것이 아닌 그 안의 변경된 counter 변수만 업데이트 됨
•
UI가 변경되는 함수에 Container를 리렌더링
⇒ 하지만 이 방식은 데이터가 변경될 때마다 렌더링을 잊으면 안되기 때문에 좋은 방법은 아님!
#3.1 setState part One (11:53)
React.useState()
초기값과 데이터의 값을 바꿀수 있는 함수가 들어있는 배열 형식으로 반환 ⇒ [초기값, 함수]
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [counter, modifier] = React.useState(66);
return (
<div>
<h3>Total clicks: {counter}</h3>
<button>Click me</button>
</div>
)
}
ReactDOM.render(<App />, root);
</script>
JavaScript
복사
•
배열 각각의 값을 쉽게 변수에 담는 방법
const x = [a, b, c];
const var1 = x[0];
const var2 = x[1];
// 이렇게 일일이 담는 방법 보다는,
// 이게 쉽다.
const x = [a, b, c];
const [var1, var2, var3] = x;
JavaScript
복사
#3.2 setState part Two (07:22)
React가 제공하는 useState가 리턴해주는 함수를 실행하면, 값을 바꿔준 후 자동으로 리렌더링 시켜준다.
<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>
JavaScript
복사
1.
데이터와 데이터를 바꿔주는 함수(f)를 변수에 담는다. (counter, setCounter)
2.
return은 사용자가 보게될 컴포넌트이고, return()에 데이터를 담는다.
3.
버튼이 클릭되면 setCounter(counter + 1)를 호출한다. f(변경 데이터)
4.
데이터가 변경되고 리렌더링 된다.
#3.3 Recap (05:19)
•
리액트의 룰에 맞춰 데이터를 변경했을 때 어떻게 refresh 되는가? ⇒ 변경된 데이터만 리렌더링(핵심!!!) 리액트는 겁나 똑똑하다.
•
즉, 위의 코드에서 setCounter 함수를 통해 state를 변경했을 때 컴포넌트는 새로운 값을 가지고 다시 한 번 렌더링 되었다.
