React

• JavaScript 오픈소스 라이브러리
• 사용자 인터페이스(UI)를 구축하기 위한 도구
• 독립적인 작은 컴포넌트들을 생성하고, 조합하여 새로운 UI를 구축한다.

JSX(JavaScript XML)

• React에서 UI를 작성하기 위한 JavaScript의 확장 문법
• HTML과 유사하여 UI 작성이 쉽다.
• Babel과 같은 도구를 사용하여 JSX를 JavaScript 코드로 변환하여 브라우저나 다른 플랫폼에서 실행가능하게 해준다.

JSX 규칙

function Func(tag) {
  return (
    <div>
      <h1 className="h_tag">1</h1>
      <My className="My_tag">2</My>
    </div>
  );
}

1. 여러 태그 작성시 부모 태그로 감싸기

• JSX는 컴포넌트에서 단일 요소만 반환해야한다. 위의 코드와 같이 h1태그와 My태그를 반환하기 위해서는 하나의 태그로 감싸야지만 반환이 가능하다. 즉 여러 요소를 작성할 때는 부모 요소로 감싸야 한다.

2. class이름 작성시 class 대신 className 사용하기

• HTML의 class 속성과 충돌을 피하기 위해 JSX에서는 className을 사용해야 한다.

3. 사용자가 정의하는 컴포넌트의 이름이나 태그의 첫 글자는 대문자로 작성하기

• React에서 컴포넌트와 HTML 태그를 구별하기 위한 규칙이다.
• 첫글자가 대문자인 경우 JSX로, 첫글자가 소문자인 경우 html로 처리된다.

4. JSX에서 JS를 쓸때 {}사용하기

• JSX에서 중괄호를 사용하지 않으면 변수로 인식하는 것이 아닌 일반 텍스트로 인식한다.

5. 조건부 렌더링을 할 때에는 삼항 연산자 사용하기

• JSX는 컴파일 시에 JavaScript로 변환되는 과정을 거치는데, JavaScript는 if문을 표현식으로 사용할 수 없기 때문에 JSX에서도 if문을 사용할 수 없다.