[리액트를 다루는 기술] JSX

1. JSX 란?

• JavaScript의 확장 문법이다
  • JavaScript의 모든 문법이 포함되어 있음
    BUT, 공식적인 JavaScript 문법은 아니다. Babel에서 여러 문법을 지원할 수 있도록
    preset, plugin을 설정해 주어야 함.
• XML과 비슷하게 생김 - tag가 비어있다면 /> 으로 꼭 닫아줘야 한다
• 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 Babel에 의해 일반 JavaScript 형태의 코드로 변환된다
  • Babel은 JSX를 React.createElement() 호출로 컴파일한다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

2. JSX의 장점

• 보기 쉽고 익숙하다 - HTML 코드를 작성하는 것과 비슷함
• 높은 활용도 - HTML 태그를 사용할 수 있을 뿐만 아니라, 컴포넌트도 JSX 안에서 작성 가능
• 주입 공격을 방지한다
  • 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있다.

3. JSX 문법

• 감싸인 요소
  • 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸주어야 한다.
     WHY ? → Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문!
• JavaScript 표현식 사용 가능 - JSX 내부에서 {  } 로 코드를 감싸주면 된다.
• If 문 대신 조건부 연산자
  • JSX 내부의 JavaScript 표현식에서 if 문을 사용할 수 없다!
    THEN? → ① JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나
                           ② {  } 안에 조건부 연산자(삼항 연산자)를 사용하면 된다.
• AND 연산자(&&)를 사용한 조건부 렌더링
  
  • 특정 조건을 만족할 때만 내용을 보여주고, 만족하지 않을 때는 아예 아무것도 렌더링 하지 않아야 하는 경우 사용한다.
• undefined를 렌더링하지 않기
  
  • OR( || ) 연산자 사용하여 해당 값이 undefined일 때 사용할 값을 지정할 수 있다.

function App(){
	const name = undefined;
    return name || '값이 undefined 입니다.';
}

• 인라인 스타일링
  • 리액트에서 DOM 요소에 스타일을 적용할 때는 객체 형태로 넣어 주어야 한다.
• JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다
• 태그는 꼭 닫아주어야 한다 - 그러지 않을 경우, 에러 발생!
• JSX 내부의 주석은 {/* 내용작성 */} 와 같은 형식으로 작성한다

4. ESLint와 Prettier 적용하기

• ESLint - 문법 검사 도구
• Prettier - 코드 스타일 자동 정리 도구

5. 정리

• JSX는 HTML과 비슷하지만, 완전히 똑같지는 않다.
• XML형식의 코드를 작성하지만, 실제로는 JavaScript 객체이며 용도와 문법도 차이가 있다.

 

 

---

참고자료

• 리액트를 다루는 기술 [김민준 저]
• React