#3.0 Understanding State
React.js의 state : 데이터가 저장되는 곳
예시를 전체 구현하려면, state를 이용해주어야 한다.
JSX
React Element를 함수 안에 넣으면, 원하는 만큼 사용할 수 있다.
재활용 가능함. 함수라서 ㄷㄷ
<!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">
// root에 접근
const root = document.getElementById("root");
const Container = () => (<div>
<h3>Total click : 0</h3>
<button>Click me</button>
</div>);
ReactDOM.render(<Container/>, root);
// 페이지에 위치시키기
</script>
</html>
- 최고는 아닌 FM 방식
리액트에서는 중괄호를 열고 변수 이름을 넣어주면 된다.
변수들을 연결해줄 수 있음
<script type="text/babel">
// root에 접근
let counter = 0;
function countUp(){
counter = counter + 1;
ReactDOM.render(<Container/>, root);
}
const root = document.getElementById("root");
const Container = () => (<div>
<h3>Total click : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>);
ReactDOM.render(<Container/>, root);
// 페이지에 위치시키기
</script><!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">
// root에 접근
let counter = 0;
function countUp(){
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container/>, root);
}
const root = document.getElementById("root");
const Container = () => (<div>
<h3>Total click : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>);
render();
// 페이지에 위치시키기
</script>
</html>=> React.js는 바뀐 부분만 업데이트해준다.
=> 인터렉티브한 어플리케이션을 만들기 좋은 특성
#3.1 setState part one
- 중괄호로 변수 연결해줄 수 있다.
- ui 업데이트 하고 싶으면, render를 해주면 됨
- 랜더링하더라도 바뀐 부분만 새로 생성해주어서 인터렉티브한 어플리케이션을 개발하기 좋음- 데이터가 바뀔 때마다 render 해주어야 함
React.js가 원하는 리렌더링을 도와주는 방식새로운 정보를 가지고 리렌더링 해주어야 한다.
#3.2 setState part two
#3.3 Recap
#3.4 State Functions
#3.5 Inputs and State
#3.6 State Practice part one
#3.7 State Practice part two
#3.8 Recap
#3.9 Fincal Practice and recap
오늘 여기까지 해주기!!! :DD:D:D:D
'Computer Science > FrontEnd' 카테고리의 다른 글
| 노마드코더 ReactJS | #3 State (0) | 2022.04.12 |
|---|---|
| 노마드 코더 ReactJS | #2 The Basics of React (0) | 2022.02.26 |
| 노마드 코더 ReactJS | #1 Introduction (0) | 2022.02.26 |
| 노마드 코더 JS | #8 Weather (0) | 2022.02.25 |
| 노마드 코더 JS | #7 To Do List (0) | 2022.02.25 |