TIL 4주차 - 2. React 기초

기본 세팅

npx create-react-app folder
npm install react-router-dom

JSX

JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드는 아니다. 때문에 부라우저가 이해할 수 있는 JavaScript 코드로 변환해주어야 한다.

Babel

이때 사용하는 것이 Babel. Babel은 JSX를 브라우저가 이해할 수 있는 Javascript로 컴파일한다. 컴파일 후, Javascript를 브라우저가 읽고 화면에 렌더링할 수 있다.

JSX 규칙

1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다.
2. CSS class 속성을 지정할 때, className으로 표기해야 한다.
3. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다.

function App(){
	const name = 'hoho'
    return(
    	<div>
        	Hello, {name}
        </div>
    )
}

4. React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다.
5. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

<div>
  {
  	(1+1 ===2) ? (<p>pass</p>) : (<p>fail</p>)
  }
</div>

6. React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용. 반드시 key를 넣어줘야 한다.

컴포넌트 component

컴포넌트란 기능을 단위별로 캡슐화한 단위
각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당