05. JSX rules

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 s26788761@naver.com 으로 문의주세요! 😀

JSX는 리액트에서 컴포넌트의 생김새?를 정의할 때 사용하는 문법

우리가 JSX로 작성한 코드는 Babel이라는 도구를 통해 JS 코드로 바뀐다!!

Babel 이란...?

Babel을 통해 React 안의 createElement라는 함수를 통하여 컴포넌트를 만들는 것!
매번 컴포넌트를 만들때마다 creteElement를 호출해서 작업을 하면 어려우니(귀찮으니?) 우리가 JSX로 작성을 하면 Babel이라는 도구를 통하여 변환해주는 것!

JSX rules

1. 태그는 꼭 닫혀 있어야 한다

태그를 열고 닫지 않으면 에러가 발생

input이나 br 태그같지 닫지 않고 쓰는 태그들에 대해서는 <input />, <br />와 같이 self closing tag를 사용하면 된다!

2. 2개 이상의 태그는 꼭 하나의 태그로 감싸 주어야 한다.

컴포넌트에서 return을 할때 두개 이상의 태그를 그냥 리턴하면, 에러가 발생
-> 하나의 태그로 감싸서 리턴해야 한다!!

• 빈 <div> 태그로 감싸기
• <> ~~~ </> (fragment)로 감싸기
  (만약 빈 <div> 태그로 감싸는게 싫다면 fagment 사용할 수 있다. fragment 사용 시 HTML 상에 아무것도 안나타남!)

+ return 문 사용할때 괄호로 감싸는 것은 가독성(같은 레벨에 있게 하기 위해)을 위해 하는 것 (필수 아님!!)

3. JSX 내부에서 JS 값을 사용할 때는 { }로 감싼다.

//생략...
  const name = "jiwon";
  return (
    <>
      <div>name</div> //"name" 출력
      <div>{name}</div> //"jiwon" 출력
    </>
  );
//생략...

4. JSX 내부에서 inline style을 적용할 때는 객체를 사용한다.

<div style="background: black;">name</div>

기존 HTML에서는 문자열로 설정을 하지만
JSX에서는 객체를 사용하여 설정

const style = {
  //"background-color" 처럼 대쉬(-)로 구분되어 있는 경우는 camelCase로 명명
  backgroudColor: 'black', 
  color: 'aqua',
  fontSize: 24, //camelCase 적용, 숫자일시 기본단위는 px
  padding: '1rem' //단위를 따로 설정하고 싶으면 문자열로 설정
}

그리고 위에서 설정한 style객체를 적용시킬때는,

<div style={style}> {name} </div>

+ 그리고 JSX는 태그에 class를 적용시킬 때, className으로 적용해야 함.

<div class="~~~"></div> //적용은 되나 콘솔창에 워닝 뜸!
<div className="~~~"></div> //good~ 

5. JSX에서 주석을 사용할때

JSX 내부에서 주석을 사용할 때는 중괄호로 감싸고,

컴포넌트 내부(tag를 여는 부분, self closing tag)에서 사용할때는 그냥 사용해도 된다

return (
  <>
    { /*주석1*/ }
    <Hello
      //주석2
    />
    <div
      //주석3
    >
    </div>
  </>
);