[React]리액트 문법

SSR vs CSR

• SSR
  전형적인 웹 어플리케이션 방식. 사용자가 페이지를 request할 때마다 서버에서 HTML, CSS, Js같은 파일을 클라이언트에 넘겨줌. 브라우저에서 그 파일들을 parsing하여 렌더링
• CSR
  처음에 모든 HTML, CSS, Js파일을 다운로드. 서버는 단지 파일을 보내주는 역할만 하며 HTML을 그리는 역할은 Client-side의 JS에서 수행. 즉, 사용자의 행동에 따라 필요한 부분만을 불러온다.

리액트의 CSR

빈 HTML을 불러오지만 화면에서는 정상적으로 표시된다.
이는 React에서 빌드시 코드를 전부 bundle.js 파일로 만들어서 클라이언트에 넘겨주고, 클라이언트는 이 파일을 통해 HTML을 동적으로 그려나간다.(Client Side Rendering)
(bundle.js는 리액트 패키지에 있는 babel과 webpack에 의해 핸들링된 상태)

리액트의 사용

index.html이 index.js를 호출, js파일내에서 컴포넌트단위로 JSX문법을 사용하여 개발
.js파일에서 Emmet을 그대로 사용하고 싶다면 VScode 하단에서 JSX로 모드를 변경하여 사용

리액트 문법

function App() {
  const name='covy';
  	return (
  	<div>
    	<h1></h1>
    	<h2>hello</h2>
 	</div>
  );
}

각각의 컴포넌트들은 반환시 하나의 태그로 묶어서 반환해야한다

function App() {
  const name='covy';
  return (
  <div>
    <h1 className='orange'>{`hello!  ${name}`}</h1>
   ....

기본적으로 js파일이기 때문에 js문법 사용가능, 태그내에서 사용하려면 {중괄호}에 넣어야 js문법으로 인식한다.

function App() {
  const name='covy';
  const list = ['우유','딸기','바나나', '요거트'];
  return (
  <div>
    <ul>
      {
      list.map(item=><li>{item}</li>)
      }
    </ul>
  </div>
  );
}

문법을 활용한 리스트 출력.

HTML을 JSX문법으로 바꿔주는 사이트
https://transform.tools/html-to-jsx