아래 명령어를 입력하면 간편하게 React 앱을 생성할 수 있다.

npx create-react-app my-app
cd my-app
npm start

JSX 란?

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다. JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

function App() {
  return <div>Hello World!</div>;
}

위의 코드는 아래와 같이 변환된다.

function App(){
  return React.createElement("div", null, "Hello World!");
}

그렇다면 JSX는 자바스크립트 문법일까?

결론은 아니다. JSX는 리액트로 개발할 때 사용하므로 공식적인 자바스크립트 문법은 아니다.

JSX 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

//오류 코드
function App() {
  return (
    <div>Hello</div>
    <div>World!</div>
  );
}

//정상 코드
function App() {
  return (
    <div> //div 대신 <></>처럼 빈 태그를 사용해도 된다.
      <div>Hello</div>
      <div>World!</div>
    </div>
  );
}

2. 자바스크립트 표현식

JSX 안에서 자바스크립트 표현식을 사용하고 싶다면 코드를 { }로 감싸주면 된다.

function App() {
  const name = "MM";
  return (
    <div>
      <div>Hello</div>
      <div>{name}!</div>
    </div>
  );
}

3. if문 대신 삼항 연산자(조건부 연산자) 사용

조건에 따라 다른 컴포넌트를 렌더링 하고 싶을 때에는 JSX 외부에서 사용하거나, { }안에서 삼항 연산자(조건부 연산자)를 사용 한다.

1. 외부에서 사용

function App() {
  let component = ''
  const name = "MM";
  if (name === 'MM'){
    component = <div>MM 입니다.</div>
  } else{
    component = <div>누구세요?</div>
  }
  return (
    <div>
      {component}
    </div>
  );
}

2. 내부에서 사용

function App() {
  const name = "MM";
  return (
    <div>
      {name === 'MM' ? <div>MM 입니다.</div> : <div>누구세요?</div>}
    </div>
  );
}

3. AND연산자(&&) 사용

function App() {
  const name = "MM";
  return (
    <div>
      {name === 'MM' && <div>MM 입니다.</div>} //조건이 만족하지 않으면 아무것도 보이지 않는다.
    </div>
  );
}

4. 즉시실행함수 사용 (이 방법은 나도 몰랐다.)

function App() {
  const name = "MM";
  return (
    <div>
      {(() => {
        if (name === "MM") {
          return <div>MM 입니다.</div>;
        } else {
          return <div>누구세요?</div>;
        }
      })()}
    </div>
  );
}

4. camelCase 프로퍼티 명명 규칙을 사용

1. JSX 스타일링
   -JSX에서 자바스크립트 문법을 쓰려면 { }를 써야 하기 때문에 스타일을 적용할 때에도 객체 형태로 넣는다.
   -카멜 표기법으로 작성해야한다. (font-size => fontSize)

function App() {
  const style = {
    backgroundColor: "red",
    fontSize: "12px",
  };
  return <div style={style}>MM 입니다.</div>;
}

2. class 대신 className
   JSX에서는 class를 넣을 때 className을 사용한다.

5. 주석

JSX 내에서는 {/ ~~ /} 로 주석을 사용 한다.

function App() {
  return (
    <div>
      {/* 너무 어렵다. */}
      MM 입니다.
    </div>
  );
}

시작 태그를 여러 줄에 작성 할 때는 이런식으로도 가능하다.

function App() {
  return (
    <div //이건 또 신기하네
    >
      MM 입니다.
    </div>
  );
}

참고 문헌

https://goddaehee.tistory.com/296