[React] JSX

출처: 📖 리액트를 다루는 기술

 

1. JSX란?

자바스크립트의 확장문법. JSX 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨.

function App() {
  return (
  	<div>
      Hello <b>react</b>
  	</div>
  );
}

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

JSX도 자바스크립트라고 할 수 있을까? 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아님.

 

2. JSX의 장점

1. 보기 쉽고 익숙하다
2. 더욱 높은 활용도

 

3. JSX 문법

1. 감싸인 요소

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 하나 감싸야 한다.
• <div>나 <fragment>, <>로 감싸주면 된다.

왜?

• Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문

 

2. 자바스크립트 표현

• 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.

 

3. If문 대신 조건부 연산자(삼항 연산자)

• JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 X
• 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 됨

 

4. AND 연산자(&&)를 사용한 조건부 렌더링

• 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않는 상황

 

5. undefined를 렌더링하지 않기

• 어떤 값이 undefined일 수도 있다면, OR 연산자를 사용하여 오류 방지하기

 

6. 인라인 스타일링

• 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다
  • 스타일 이름은 카멜표기법으로 작성.
  • 예) background-color → backgroundColor

 

7. class 대신 className

• 리액트 v16부터는, class 값을 설정해도 스타일이 적용되기는 하지만, 개발자 도구의 Console 탭에서 경고 발생

 

8. 꼭 닫아야 하는 태그

• HTML에서는 <input>으로만 사용하여도 오류 발생하지 않지만 JSX에서는 <input> 만 입력하고 태그를 닫지 않으면 오류 발생
• self-closing 태그 사용하기 : <input />

 

9. 주석

• JSX에서 주석 작성 시 {/* ... */}와 같은 형식으로 작성
• 시작 태그를 여러 줄로 작성할 때는 // ... 도 가능
• <div className="react" // 주석주석 >