3.0 Understanding State
2022. 9. 6. 17:41ㆍReact/ReactJS로 영화 웹 서비스 만들기
이번에는 State에대해서 배워보자.
state는 기본적으로 데이터가 저장되는 곳이다.
우선 vanilla.html에서 작성하던 코드를 보면, 버튼을 클릭하면 counter가 올라가도록 작성하였는데
이것을 state로 만들 수 있다.
자 우선 아래의 코드를
<!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");
const Container = () => (
<div>
<h3>Total clicks: 0</h3>
<button>Click me</button>
</div>
)
ReactDOM.render(<Container />, root);
</script>
</html>React.js코드 내에서 카운트를 셀 수 있게 만들어보자.
1. 좋지않은 방법
<!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");
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>
</div>
);
}
render();
</script>
</html>
그런데 우리가 이전에 vanila.html 파일로 버튼을 클릭하면 body와 span이 업데이트하는 것을 확인할 수 있는데
index.html 파일로 버튼을 클릭하면 UI에서 바뀐부분만 업데이트 하고있는 것을 확인할 수 있다.
이는 React JS는 렌더링 된 컴포넌트가 무엇인지 확인하고 바꿀 부분만 바꾼다는 것이다.
이로 아주 좋은 인터렉티브하게 제작이 가능하다는 것을 알 수 있다.
그러나
이 방식은 계속해서 RENDER 해주는 것을 잊으면 안되기 때문에 최고의 방법은 아니다.
로그인페이지, 폼, 알림 등이있고 계속 호출해야한다면, 큰 에너지가 들기 때문에 다음에는
리렌더링을 발생시킬 가장 좋은 방법을 알아보도록 하자.
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 3.2 setState part Two (0) | 2022.09.07 |
|---|---|
| 3.1 setState part One (0) | 2022.09.07 |
| 2.6 JSX part Two (0) | 2022.09.05 |
| 2.5 JSX (0) | 2022.09.05 |
| 2.3 Events in React (0) | 2022.09.02 |