[React] JSX 정리

JSX

• JavaScript eXtention (JS의 확장 버전)
• HTML 문법을 JavaScript 코드 내부에 쓴 것
• 빌드 시 Babel에 의해 자바스크립트로 변환

 

JSX 사용 시 주의점

• 속성은 항상 큰따옴표로 감싼다.
  • class의 속성명은 className으로 준다.
• 태그는 항상 닫혀있어야 한다.
  • input, br을 사용할 때 HTML과 다르게 클로징 태그 사용해야 함
• 어떤 태그라도 Self-closing tag 가능하다.
  • <input />, <div />
• 형제 노드를 작성할 수 없다.
  • 반드시 div나 Fragment태그로 감싸진 형태여야 함
• 변수를 렌더 안에서 정의하고, 리턴에서 변수명을 중괄호로 감싼 형태로 표현

  render() {
      const name = 'WonSang';
      return (
      	<div>
          	<div>{name}</div>
          </div>
      )
  }