React CSR

React로 제작된 페이지에서 HTML파일의 소스를 확인해보면 root id값을 가진 빈 div태그가 있을 것이다.
하지만 브라우저에서는 수 많은 UI가 동작하고 있음을 알 수 있을 것이다.

이는 React가 CSR(Client Side Rendering)이기 때문인데
HTML, JS, React 코드가 함께 브라우저로 전송 되고
Client Side에서 전송된 코드가 브라우저에서 동작하며 필요한 DOM요소들을 동적으로 생성해주기 때문이다.

JSX

JSX(javascript xml)은 html과 유사하다.

JSX 작성 시 유의사항 3가지

1. return()의 바로 자식은 하나의 태그만을 허용한다.
   • 특정 태그로 감싸기 ex) <div></div>
   • 빈 태그로 감싸기 ex) <></>
   • React 내부적으로 제공하는 태그 ex) <Fragment></Fragment>
2. html에서는 태그 속성으로 class를 사용하지만 React에서는 className을 사용해야 한다.
3. 어떤 태그에서 JS의 값을 사용하려면 {}로 감싸줘야 한다. ex) <div>{name}</div>
   • li를 여러개 반환 ex) <ul>{list.map(elm => <li>{elm}</li>)}</ul>

• 태그 내부에서 style을 사용하려면 중괄호를 두번 감싸줘야 하는데 이는 JS를 사용하기 위한 {}한번, css객체를 넣기 위한 {}한번으로 {{}}이다.
• JSX 문법으로 변환해주는 사이트

TIP

<React.StrictMode></React.StrictMode>는 배포할 때 자동으로 제거된다. JS의 strict mode와 비슷한 개념이라고 생각하면 된다. // 보다 엄격한 개발 환경