state는 기본적으로 데이터가 저장되는 곳이다.
지금 만들어놓은 클릭하면 증가하는 counter 를 state로 만들 수 있다.
- 어떻게하면 React/js 어플에 값이 바뀔 데이터를 담아줄 수 있을까?
React JS코드 내에서 카운트를 셀 수 있게 만들어 보자 !!
<!DOCTYPE html>
<html lang="en">
<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();
}
function render() {
ReactDOM.render(<Container />, root);
}
function Container() {
return (
<div>
<h3> Total clicks : {counter} </h3>
<button onClick={countUp}>Click me</button>
//이벤트 리스너를 onClick을 추가 하여 클릭하면 counter를 증가시킨다.
</div>
);
}
render();
//new Rendering이 필요하다 !! counter 가 1 증가할 때마다 즉각 보이기 위해..
//그를 위해선 const Container 을 함수로 만들어주면 된다. 그리고 ReactDOM.render(Container, root)를
//React.render(<Container />, root)로 바꿔준다. 그리고 countUp함수 안에 넣는다.!!!!!!!
// 아냐 ! 아예 render라는 함수를 만들어주자 !
</script>
</html>UI에서 바뀐 부분만 업데이트 된다. Total clicks 나 button을 다시 생성할 필요없고
오로지 바뀐 부분만 업데이트 할 수 있다. 여러가지 요소들을 리렌더링
하려고 해도 바뀐 부분만 업데이트 될 것 !!
다음 강의에서는 리렌더링을 발생시킬 가장 좋은 방법을 알아 볼 것이다.
Interactive !!
최강 프론트엔드 개발자가 되고싶은 안유진 입니다