React 기초

React

JSX 란 ??

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

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

React에서는 DOM과 다르게 CSS,JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.

-> 즉, 컴포넌트 하나를 구현하기 위해 필요한 파일이 줄었고, 한눈에 컴포넌트를 확인할 수 있다.

JSX를 사용하면 JavaScript만으로 마크업(markup)형태의 코드를 작성하여 DOM에 배치할 수 있다.

->

주의할 점은 JSX는 HTML처럼 생겼지만, HTML이 아니기 때문에 'Babel'을 사용한 컴파일 과정이 필요하다.

JSX 규칙

1. JSX에서 여러 엘리먼트를 작성하고자 하는경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

<div> // 최상위 태그 (opening)
  <div>
    <h1>안녕</h1>
  </div>
  <div>
    <h2>하세요</h2>
  </div>
</div> // 최상위 태그 (closing)

2. React에서 CSS class 속성을 지정하려면 "className"으로 표기해야함.

<div className="abc">hi</div>

3. JSX에서 JavaScript를 쓰고자 한다면, 중괄호를 이용해야한다.
   -> 중괄호를 사용하지 않으면 일반 텍스트로 인식!

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

4. React 엘리먼트가 JSX로 작성되면, 대문자로 시작해야한다.
   -> 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 함.

 function Component() { // 이렇게 대문자로 작성된 JSX컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.
   return <div>Hi!!</div>
 }

5. 조건부 렌더링은 if문이 아닌 삼항연산자를 사용해야 한다.

<div>
  {
    name === 'hyo' ? <p>일치</p> : <p>불일치</p>
  }    
</div>

6. React에서 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용해야함.
   map함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야 한다.
   -> 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 뜸.

const contents = [{id: 1, name: 'hyo', age: 5}, {id: 2, name: 'woo', age: 3}]

function Component() {
  const content = contents.map((el) => {
     <div key={el.id}> // key JSX 속성을 넣음
        <h2>{el.name}</h2>
        <p>{el.age}</p>
     </div>
  })
  
  return (
     <div>
       {content}
     </div>
     
  )
}