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() {
// //code
// } 이것은 다음과 같다 ↓↓↓↓↓↓
function App() {
const data = React.useState(0); // 괄호 안에 초기값 설정 가능하다. [0,f]
//이것은 [undefined, f]라는 배열을 만드는데 undefined는 data이고 data를 바꿀 때 사용하는 함수가 f 이다.
console.log(data);
return (
<div>
<h3> Total clicks : 0 </h3>
<button>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
어떻게 하면 배열에서 요소들을 꺼내서 이름을 부여할 수 있을까?
const x= [1,2,3];
const a = x[0];
const b = x[1];
//...이건 시간이 많이 걸려 따라서
const x= [1,2,3];
const [a, b, c] = x;
//이럼 이제 a 는 1, b 는 2 , c 는 3이 되는 것이다. 이게 state의 첫 부분이다.다음 시간에 modifier 로 counter값을 변경하는 방법을 알아보자
<!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");
function App() {
const [counter, modifier] = React.useState(0);
//첫번째 요소는 우리가 담으려는 data 값이고 두번째 요소는
//이 data값을 바꿀 때 사용할 modifier이다.
counter = 120;
return (
<div>
<h3> Total clicks : {counter} </h3>
<button>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
최강 프론트엔드 개발자가 되고싶은 안유진 입니다