설명

JSX는 babel을 통해 createElement로 바뀐다

바뀌는 개념들은 state로 등록
안바뀌는 개념들은 Tag로 등록

return 뒤에는 소괄호()를 넣어 태그간의 라인을 맞춰준다
single태그는 JS와 다르게 리턴할 때 <input/> 처럼 /를 붙여야한다.
이것이 JSX라 부르는 이유로 XML과 비슷하기 때문이다.

JSX는 JS를 웬만하면 섞어쓰지 말아야한다.
예를들어 return 하는 JSX 안에 이벤트로 길게 js를 작성하지말고
해당 내용을 하나의 함수로 넣고 따로 함수를 작성한다.
(다른 이유로는 렌더링할때마다 함수가 JSX 코드안에 있으면 매번 함수가 다시 만들어지기 때문에 함수 코드가 길다면 성능에서 떨어진다 => 클래스 사용 시 )

리턴하는 react 최상단은 태그하나로 크게 감싸야한다.
예전에는 div가 필요했으나
요즘은 빈 태그로도 처리할 수 있다.

fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다.
만약 해당부분을 <></>로 사용한다면 문제가 없지만 문제가 발생한다면
React.Fragment를 사용하여 처리할 수 있다. (바벨이 <></>를 처리)'

setState는 비동기로 작동된다.

useRef를 통해 Dom에 접근이 가능하나
선언한 useRef 변수값에 current를 붙이고 사용해야한다.

ex)

let inputRef = useRef()
inputRef.current.focus()
return ...<input ref={inputRef}...></input>

class 컴포넌트와 다르게 함수형 컴포넌트에서
하나의 state에 객체형을 전부 받으면 쓰는데 더 복잡해지고
특정 객체의 속성값만 수정할 경우 기존 사용하던 객체의 속성값은 없어진다.
React 기본 강좌 2-2. Class와 Hooks 비교하기 8:21