React?
React는 Facebook이 2011년도에 만든 Javascript library다.
그들이 이름을 막 지었을까🫤❔
내가 만든 프로그램을 한 글자로 표현 할 수 있는 것은 이거다! 하면서 지었을 것이다.
왜❔ React는 React일까❓
document.getElementById()로 html에서 가져와서 javascript로 매번 업데이트 해주는 것 너무 귀찮은데, 변수가 바뀌면 알아서 UI업데이트 해주면 안돼??
그래서 나온 것이 React다.
그렇다면 무엇에 리액션을 할까?
여기서 state라는 개념이 나온다.
state에 리액션을 한다고 생각하자.
프로그램에는 정말 많은 변수가 있다.
그래서 변수가 바뀔 때 마다 매번 UI 업데이트 해주면 컴퓨터가 터진다 💻🤯
UI를 그려주는 바꿔주는 작업은 되게 비싼일이다.😭
사람도 계~~~속 그림 그리라고 하면 힘들어 하듯이 컴퓨터도 마찬가지다. CSS도 계속 바꿔줘야하고.. 힘들어한다.
뭔지도 모르는 오만변수 바뀔 때마다 렌더링 하는 것은 미친짓이다.
이것을 보안하기 위해 만든 것이 변수와는 또다른 개념인 state인 것이다.
변수와 state 두개의 개념을 분리해서
변수에는 잠깐 값을 들고 있기 좋은 것! 업데이트 된 것은 신경쓰지 않는 대신,
State가 업데이트 되면, UI 렌더링을 해주자!!
∴ state는 변수 다루듯이 다루면 안된다
버튼 클릭할 때 마다 UI 바뀌게 해주려면 State 써야함!
state 만드는 법!
import {useState} from 'react';
// react에서 데려와서 state 가져와서 사용할거야
// → react에서 제공하는 유용한 함수(react Hook) 중 하나
function Count() {
let count = 0;
// 잠깐 저장해도 되는 값만 사용하도록 하자.
const [count2, setCount2] = useState(0);
// count2 = 초기값 담고 있는 변수
// setCount2 = 초기값이 바꿀 수 있게 도와주는 set함수
// useState(매개변수) → 초기값 : react가 주시하는 값
const increase = () => {
count += 1;
// 0+1 반복
setCount2(count2+1)
// setcount2함수(바꾸고 싶은 값)
console.log("count work?", count, "state count2", count2)
}
return (
<main>
<div>{count}</div>
<div>state:{count2}</div>
<button onClick={increase}>증가</button>
</main>
);
};
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
console.log("count work?", count, "state count2", count2)
>> count work? 1 state count2 0
>> count work? 1 state count2 1
>> count work? 1 state count2 2
>> count work? 1 state count2 3
>> count work? 1 state count2 4· State값 업데이트 할 때마다 컴포넌트(function Count(){...}) 다시 실행되면서 새로운 값으로 UI 업데이트(return()) 해줌.
· count 변수는 초기화되어 아무리 증가시켜도 1로만 보임.
∴ 변수는 잠깐 저장해놔도 되는 값인 경우 쓰자
· UI 그려주는것 비싸니까 state 바꿀거 다 모은 다음에 마지막에 UI 그려줌 → 비동기적
⭐ 콘솔로 보면 한박자 늦은 것처럼 보임.
