JSX란 무엇인가

JSX

• 프로젝트에서 컴포넌트를 렌더링하면, 함수에서 반환하는 내용을 나타냄.
• 함수 반환 값을 보면, HTML을 작성한 것 같지만, HTML도 아니고 문자열 템플릿도 아닌 JSX라고 부름
• 자바스크립트의 확장 문법, XML과 유사하게 생김
• 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태로 변환됨
• 가독성이 좋고 작성하기 쉽다는 장점이 있음
• 또한, component를 다른 component 안에 작성할 수 있음.(customize 가능)
• 주의사항
  • Component를 개발할 때는, DOM 트리 구조를 생각해야하기 때문에, 반드시 부모 태그(div, container, section 등)로 감싸서 return해야한다.
  • 의미없는 div 대신 Fragment로 감싸서 이용할 수 있다.
  • JS 문법을 이용할 수 있다.
  • 
    

    const MyComponent = () => {
    const name = 'zin0';
    return (
      <Fragment>
          {/* 주석 맞지? */}
          <p>
            반갑다 {name}
          </p>
      </Fragment>
      );
    }

  • JSX를 작성할 때 (
    Hello World
    )와 같이 괄호로 감쌀 때도 있고, 감싸지 않을 때도 있음. 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 X.
    JSX를 괄호로 감싸는 것은 필수 사항X (감싸도 되고 감싸지 않아도 OK)
  • return은 undefined가 오면 안됨. (null이나 JS 문법에서 undefined는 괜찮음)
  • 주석은 { /* 주석 내용 */ }로 표현

---

Reference

https://velopert.com/3626

 

리액트를 다루는 기술