state: data를 저장하는 곳
-counter변수를 증가시키고 ui에 전시하는 함수를 state로 만들 수 있다
리액트의 좋은점은 UI에서 바뀐 부분만 업데이트 해줌
변수를 JSX에 전달하는 방법
let counter = 0; 변수를 만들고
Total clicks: {counter} 로 만들어주면
변수의 카운터 숫자에 따라 변화됨
onClick={countUp}
-> 이벤트리스너가 countUp 함수를 호출하고 countUp은 카운트를 바꿔줌
ReactDOM.render()로 container 처음 랜더링 할 때 카운터가 0이므로 0으로 호출됨
그리고 container를 리렌더링을 해줘야 카운터가 +1 상태로 업데이트 됨.
즉, countUp을 호출할 때마다 ReactDOM.render()을 다시 호출해야함
-> countUp에 ReactDOM.render( ) 넣어주기
<h3>count:{counter}</h3>
<button onClick={countUp}>click me</button>
-JSX에 변수를 추가하고 싶다면 태그의 내용안에서 {변수}로 나타내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span>count:0</span>
<span id="root"></span>
</body>
<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() {
//라약트 엘리먼트 생성=>또다시 2개의 리액트엘리면트인 h1,button생성
return (
<div>
<h3>count:{counter}</h3>
<button onClick={countUp}>click me</button>
</div>
);
}
//위와 동일한 함수
// const Container = () => (
// //라약트 엘리먼트 생성=>또다시 2개의 리액트엘리면트인 h1,button생성
// <div>
// <h3>count:{counter}</h3>
// <button onClick={countUp}>click me</button>
// </div>
// );
ReactDOM.render(<Container />, root); //container 렌더링->리렌더링해 보여줘야함
</script>
</html>
->UI를 업데이트하고 싶다면(변화된 부분 화면에 출력) ->render함수를 재호출해 리렌더링하면 됨
-render가 최초로 호출될 때 이 함수는 container컴포넌트를 root div에 담음
-container함수가 호출되면 리액트 엘리먼트가 반환
react.js가 data를 담고 업데이트하는 방식
react.js가 업데이트 시마다 새로운 정보를 가지고 리렌더링하도록 하기
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const data = React.useState(0); //(2) [0, ƒ] ->useState(초기값)
console.log(data);
//data와 data를 바꿀떄 사용하는 함수 f 출력
//라약트 엘리먼트 생성=>또다시 2개의 리액트엘리면트인 h1,button생성
return (
<div>
<h3>count:0</h3>
<button>click me</button>
</div>
);
}
-useState는 배열하나를 출력하는데 이배열의 첫번째요소는 우리가 담으려는 data값이고 두번쨰요소는 이 data값을 바꿀때
const data = React.useState(0); //(2) [0, ƒ]
console.log(data);
//data와 data를 바꿀떄 사용하는 함수 f 출력
//위 코드와 같은 기능 수행
let counter = 0; //초기값-배열의 첫번쨰 값
function countUp() { //counter값을 바꾸는 함수
//counter 증가 함수
counter += 1;
render();
}
어떻게 하면 배열에서 요소들을 꺼내 이름을 부여할 수 있을까
const food=[num1,num2];
const [one,two]=food;
//위 코드와 동일
const one=num1;
const two=num2;
modifier를 이용해 counter의 값 바꾸기/ modifier가 필요한 이유
<script type="text/babel">
const root = document.getElementById("root");
function App() {
let [counter, modifier] = React.useState(0); //(2) [0, ƒ]
//useState는 배열 출력-data값/data를 바꿀떄 사용할 값
const onClick = () => {
counter = counter + 1;
console.log(counter);
//값이 바뀌면 리렌더링하여 업데이트해야함
//counter를 업데이트하는데 modifier함수를 이용
modifier(999);//counter값 999로 업데이트 ->자동으로 리렌더링함
};
//data와 data를 바꿀떄 사용하는 함수 f 출력
//라약트 엘리먼트 생성=>또다시 2개의 리액트엘리면트인 h1,button생성
return (
<div>
<h3>count:{counter}</h3>
<button onClick={onClick}>click me</button>->컴포넌트 리렌더링 됨
</div>
);
}
ReactDOM.render(<App />, root);->렌더링
</script>
-useState는 data값과 data값을 바꿀수 있는 요소를 포함한 배열을 출력함
-함수에서 data값을 변경해 컴포넌트에 적용시킬 수 있음
-react.js는 바뀐 부분만을 html에 업데이트시킴
-변수를 컴포넌트에 연결-변수를 데이터에 담고 해당 변수에 담긴값을 바꿈
-> getElement로 변수생성-이벤트 리스너 추가한 함수생성-렌더링 코드를 이용해
modifier함수를 이용해 컴포넌트의 state, 즉 어플리케이션의 데이터를 바꿀떄 컴포넌트는 새로운 값을 가지고 다시한번 렌더링됨=컴포넌트는 재생성됨
-데이터가 바뀔떄마다 컴포넌트를 리렌더링하고 UI를 refresh함->값이 바뀌는 부분만 변경됨
-바로 HTML을 만들어 그 안에서 이벤트리스너를 더해주고 UI를 업데이트하면 지동으로 리렌더링됨
*state 값 설정하는 방법
1. modifier로 특정값 지정-> 숫자나 글자
2. 이전 state값을 이용해 현재 state 값 계산
const onClick = () => {
modifier('2314')//1번
modifier(counter + 1);//2번
modifier((current)=>current+1);//2번