📖 오늘 학습 뽀인트!

1. React
   1-1 useState

1. React

1-1 useState

🕵️‍♀️ useState란?
변수 값이 바뀌는 경우, 변경된 값을 감지하는 객체이며 변경된 값을 동적으로 화면에 보여줘야 할 때 사용한다. 즉, 값이 바뀐 컴포넌트를 재랜더링 해주는 객체이다.

//* const [num, setNum] = useState(0) 과 동일
// const numState = useState(0);
// const num = numState[0];
// const setNum = numState[1];

const [num, setNum] = useState(초기값)

function clickBtn(){
	setNum(num+1) // num 값 1씩 증가
}

return(
	<button onClick={clickBtn}>그냥 숫자</button>
	<p>{num}</p>
)

---

// JS
const num =0;
const a =document.querySelector("p")

function clickBtn(){
	num++
	a.innerText = num
}
<button onclick="clickBtn">그냥 숫자</button>

num이라는 변수와 setNum이라는 함수가 선언되었고, 초기값이 설정되었다.
setNum(1)로 num의 값을 변경할 수 있으며, 변경된 값을 페이지에 바로 업데이트할 수 있다.

---

❓ useState와 바닐라 JS의 동적 구현
button 을 클릭했을 때, num이 1씩 증가되어 p태그에 표시되는 동작은 같다. 하지만, React를 방금 배운 내가봐도 React 쪽이 코드가 쉽게 이해된다.

---

❓ 동적인 웹사이트를 구현할 때는 무조건 React가 좋은가
아니다, React는 재사용성이 높고 코드가 간결하고 유지보수가 좋다는 장점이 있지만 규모가 작은 프로젝트를 만들 때는 좋지 못 하다.
그 이유는 React를 사용하기 위해 설치할 모듈들이 있다. 규모가 작다면 배보다 배꼽이 큰격이다. 그리고 규모가 작은 웹사이트에서 React를 사용하기 위해 React 환경을 따로 학습해야 된다.
내 스스로 결론을 내보자면 아래와 같다.
정적인 웹사이트만 구현한다 = HTML, CSS, (JS는 옵션)
동적인 웹사이트를 구현해야 되고 프로젝트 규모가 작다 = JS
동적인 웹사이트를 구현해야 되고 프로젝트 규모가 크다 = React

---

❓ const num 의 값 변경
const [num, setNum] = useState(초기값) 여기서 num 변수는 const 로 선언되어 값을 재할당할 수 없는데 값이 변경된다.
어떻게 가능한 걸까?
setNum 함수를 호출하여 값을 변경하면 밖에 있는 num에 값을 변경하는 것이 아니라 setNum 함수 내부에서 변경된 num의 값을 새로 선언하는 것이다. 즉, 밖에 있는 변수를 재할당 하는 것이 아니라 함수 내부에서 변경된 값으로 새로 선언하는 것이다. 그리고 변경된 값을 보여줘야 하기 때문에 num을 사용하는 모든 곳이 재렌더링 된다.

---

❓ 비동기? 동기?
useState은 비동기로 실행된다. 다시 정확히 말하자면, setState가 비동기로 실행된다.
비동기로 실행되는 이유는 하나의 페이지에는 많은 state들이 있는데 이 state들 하나하나 변경될 때 마다 재렌더링이 되면 성능저하가 발생할 수 있고 비효율적이기 때문이다.
그렇다면 React는 어떤 방법으로 비동기 처리할까?
1. setState 실행.
2. 변경된 state값으로 Virtual-Dom 생성.
3. 현재의 state값의 element-Dom과 Virtual-Dom 비교.
4. 업데이트가 필요한 state에만 DOM 적용 후 렌더링.
이때, 동일한 state가 여러번 변경되면 가장 최신의 state값만 적용되며,
서로 다른 state가 여러번 변경되면 16ms 동안 변경된 state 값들을 하나로 묶어(Batch 진행) 재렌더링한다.

---

❓ useState의 비동기 동작을 동기 동작으로 변경
1. useEffect를 사용하여 비동기를 동기적으로 실행할 수 있다.

const [num, setNum] = useState(0);
    function handleNum() {
        setNum(num + 1);
        console.log(num);
    }
    return (
        <>
            <p onClick={handleNum}>눌러</p>
            <p>{num}</p>
        </>
    );

눌러를 클릭 했을 때, 변경된 num+1된 값이 출력되어야 될 것 같지만 실제로 결과는 변경 전 값을 log에 출력했다. 그 이유는 setNum이 비동기적으로 실행되기 때문에 값이 변경 전 log가 먼저 찍힌 것이다.
자... 그러면 저걸 useEffect를 사용해 동기적으로 변경해보자.

const [num, setNum] = useState(0);
    function handleNum() {
        setNum(num + 1);
    }
    useEffect(() => {
        console.log(num);
    }, [num]);
    return (
        <>
            <p onClick={handleNum}>눌러</p>
            <p>{num}</p>
        </>
    );

useEffect는 "값이 변경되면 이거 해줘~" 이런 느낌이기 때문에 동기적으로 실행된다.
2. setState의 인자로 함수를 넣어 동기적으로 실행할 수 있다.
( setState((item)=> {return item+1 }) )