도구의 등장 배경을 이해하자. 이 도구로 무슨 문제를 해결하려 했는가?

1. HTML 요소를 만들고
2. 이벤트 리스너로 동작을 읽음
3. JS에서 데이터 갱신을 한 뒤
4. HTML 갱신

1. JS(React)에서 HTML 생성
2. HTML 갱신

React는 엔진. HTML을 인터랙티브하게 만들어주는 라이브러리.
React DOM은 모든 React Element를 HTML Body에 놓을 수 있게 해줌.
!React의 동작 본질을 이해해야 한다!

createElement(, {Property}, );

JSX:
컴포넌트의 첫글자는 반드시 대문자일 것.
소문자라면 JSX는 HTML 태그로 인식함.

이벤트 리스너를 통해 데이터를 갱신할 때...
Vanilla: 데이터가 포함된 부분들이 전부 갱신
(ex. body - div 에 태그가 있을 때, body와 div가 전부 갱신됨)
React.js: 바뀐 부분만 갱신함
기존 렌더링과 다음 렌더링의 차이 부분만 갱신하는 것.

const [state, modifier] = React.useState();
modifier로 state의 내용을 바꿀 때, 전체 컴포넌트가 재렌더링됨.
state를 직접 수정하는 코드는 쓰지 말것!!!!
State를 수정할 땐 함수(modifier)를 쓰자
useState의 함수 인수를 사용하는 법.. setToDos((currentArray) => [toDo, ...currentArray]); // 값을 설정하기 setToDo(""); // 값을 보내기

실험) 예를들어.. 첫번째 useState의 state를 두번째 useState의 modifier로 바꾸려고 하면.. 안됨..안바뀜..

Hook의 규칙

HTML이 아닌 JSX를 사용하고 있으므로, 차이점을 알아야함.
HTML JSX
class className
for forHtml

부모의 State가 변경되는 경우, 자식 Component도 모두 변경되므로
어플리케이션이 느려지는 원인이 될 수 있음.
컴포넌트가 변경되었는지 상태를 메모하는 함수가 존재한다.

State가 변경될 때 함수 안에 있는 모든 코드(해당 컴포넌트)는 재실행된다. (모든 코드가 재실행됨)
컴포넌트 안의 특정 코드를 단 한번만 실행시키고 싶을 때, useEffect를 사용.

이 경우는 인수1만 바뀌어도 실행됨
useEffect(() => {
실행될 코드
}, [인수1, 인수2])

.map() 는 js 함수
예전 배열을 가져와 편집함
map을 사용하여 dom 엘리먼트를 작성할 땐 꼭 고유값, ID가 필요함!!
API 사용시.. 스펠링 틀리면 안나옴.. 주의..!!!!

react-router-dom
Link 컴포넌트는 브라우저를 새로고침하지 않고 페이지를 이동할 수 있음.
이게 어떻게 가능한가???