~3.3까지의 강의
State는 기본적으로 데이터가 저장되는 곳이다.
전체코드
<!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">
let counter =0;
function countUp(){
counter =counter+ 1;
Render();
}
function Render(){
ReactDOM.render(<Container/ >, root);
}
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
Render();
</script>
</html>
사용자에게 변화를 줬다는 걸 보여주려면 render를 호출해주면 된다. render가 최초로 호출될 때, Container 함수를 넣어주면 된다.
렌더링(rendering)
html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다.
React에서 저장하고 자동으로 re-rendering을 배우는 방법을 배워보자.
const [counter,setCounter] = React.useState(0);
useState 사용했을 때 배열 하나를 주는데, 배열 첫번째요소 우리가 담으려는 data 값(=counter)이고, 두번째 요소는 data 값을 바꿀 때 사용할 modifier(=setCounter)이다.
왜 modifier가 필요할까?
그 이유는 rendering 때문이다!
처음 코드처럼 계속 호출하기도 힘들고, 까다롭다. 이 것이 바로 modifier가 필요한 이유이다. modifier는 값을 받아서, 어떤 값을 부여하던 그 값으로 업데이트하고 re-rendering을 일으킨다. 즉, modifier 함수로 값을 바꿔줄 것이다.
위의 코드로 counter 같은 data를 숫자형 data로 건네주고, 그 data 값을 바꿀 함수도 함께 넘길 것이다. 함수를 이용해 data를 바꿔지고 컴포넌트도 동시에 바꿀 수 있다. modifier를 이용해 state 바꾸면 컴포넌트가 재생성된다. 새로운 값을 가지고 return이 실행된다.
최종코드
<!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">
function App(){
const [counter,setCounter] = React.useState(0);
const onClick = () => {
setCounter(counter+1);
};
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App/ >, root);
</script>
</html>'Web Service > React' 카테고리의 다른 글
| [영화 웹 서비스 만들기] #5. State (0) | 2022.03.21 |
|---|---|
| [Next.js] Vercel 오류 및 Next.js 구조 (0) | 2022.03.19 |
| [영화 웹 서비스 만들기] #3. JSX (0) | 2022.03.14 |
| [영화 웹 서비스 만들기] #2. 바닐라JS와 리액트JS의 비교2, 버튼 (0) | 2022.03.14 |
| [영화 웹 서비스 만들기] #1. 바닐라JS와 리액트JS의 비교 (0) | 2022.03.14 |
댓글