3.3 Recap
2022. 9. 7. 17:23ㆍReact/ReactJS로 영화 웹 서비스 만들기
modifier함수를 산용해 state, 즉 어플리케이션의 데이터를 바꿀 때,
컴포넌트는 새로운 값을 가지고 다시한번 렌더링 된다. - 컴포넌트가 재생성 됨
데이터가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것임
다음과 같이 코드를 구성하면
처음, 그리고 버튼을 클릭할때마다 rendering되는 것을 알 수 있다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/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");
function App() {
const [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter + 1);
}
console.log("rendered");
console.log(counter);
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
하지만 react는 변경한 부분(숫자-클릭수)만 변경한다!!!!
즉, modifier 함수로 state를 바꿀 때, 컴포넌트 전체가 새로운 값을 가지고 재생성된다.
결론 : State가 변경될 때, Rerendering된다
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 3.5 Inputs and State (0) | 2022.09.13 |
|---|---|
| 3.4 State Functions (0) | 2022.09.07 |
| 3.2 setState part Two (0) | 2022.09.07 |
| 3.1 setState part One (0) | 2022.09.07 |
| 3.0 Understanding State (0) | 2022.09.06 |