nomad code_react js로 영화앱 만들기_#3.0 ~ 3.4
2022. 10. 6. 15:36ㆍreact
버튼 클릭 시, 카운팅되는 함수
vanilla JS
<body>
<span>Total click: 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick(){
counter = counter + 1;
span.innerText = `Total click: ${counter}`;
};
button.addEventListener("click", handleClick);
</script>
<결과>
react_1(bad)
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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);
}
const Container = () => (
<div>
<h3>Total click: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
render();
</script>render 함수로 클릭이 될 때 마다 업데이트된 counter을 리랜더링 함
react_1(good)
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/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); // 직접 값을 넣는 방법
setCounter((current) => current + 1); // set에 함수를 넣는 방법. 이 쪽이 안전하고 확실함
}
return(
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
)
}
ReactDOM.render(<App />, root);
</script>React.useState()는 [0, f] 즉, 초기값 0과 초기값을 변경할 수 있는 함수를 가진 배열을 반환한다
각각의 배열값을 const [aaa, setAaa] = React.useState(); 로 각각 선언해 리렌더링 하고자 하는 값에 사용할 수 있다.
위 함수의 경우 버튼을 클릭하면 1씩 증가하해야 하므로 초기값으로 0을 부여함 -> (React.useState(0);)
'react' 카테고리의 다른 글
| nomad code_react js로 영화앱 만들기_#3.9 (0) | 2022.11.09 |
|---|---|
| nomad code_react js로 영화앱 만들기_#3.5 ~ 3.8 (0) | 2022.11.09 |
| nomad code_react js로 영화앱 만들기_#2.3, #2.5, #2.6 (0) | 2022.10.05 |
| nomad code_react js로 영화앱 만들기_#2.2 (0) | 2022.10.05 |
| nomad code_react js로 영화앱 만들기_#2.1 (0) | 2022.10.05 |