JSX란? / JSX 문법 정리

JSX란?

자바스크립트에 XML을 추가한 확장문법

리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

브라우저는 JSX 문법을 이해하지 못한다.

따라서 브라우저에서 실행되기 전에 Babel을 사용하여 일반 자바스크립트 코드로 변환된다.

 

 

| JSX 문법의 장점

• 편하게 렌더링이 가능하다.
• HTML 코드와 유사해서 보기 쉽고 익숙하다.
• 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높다.

| JSX 문법 정리

1. 리액트 컴포넌트 여러개는 꼭 하나의 빈(또는 div) 태그로 감싸주어야 한다.

function App() {
    return (
      <>
      	<div>div태그</div>
        <Component 1/>
        <Component 2/>
      </>
    );
}

Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하기 위해서,

컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야한다는 규칙이 있기 때문이다.

 

 

2. JSX파일에서 Javascript 언어를 사용할 때는 { }로 묶어서 사용한다.

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter(prev => prev + 1);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

 위의 코드에서 counter는 변수를 표현하는 자바스크립트 문법이므로 중괄호{}로 묶어서 적어주었다.

 

 

3. return()문 안에 if문을 사용할 수 없다.

<div> if(조건문) {코드내용} </div>

위와 같이 사용하면 에러가 난다.

따라서 삼항 연산자나 &&으로 대체해서 코드를 작성해야 한다.

다만 return 문 밖에서는 if문을 사용할 수 있는데

아래가 그 예시 코드이다.

function Component() {
	if(true) {
    	return <p>참이면 보여줄 HTML</p>
    }
    return null;
}

 

 

4. HTML어트리뷰트 이름 대신 CamelCase 프로퍼티 명명 규칙을 따른다.

background-color(X) →  backgroundColor(O)

font-size(X) → fontSize(O)

 

5. class 대신 className을 사용한다.

label태그에 for 속성 대신 htmlFor을 사용한다.

function App() {

	return (
    	<>
          <label htmlFor="blank">Label </label>
          <input
            id="blank"
            className="input-blank"
            /*...(생략)*/
          />
        </>
    );
}

위와 같이 class나 for을 사용하지 않는 이유는 해당 언어들이 자바스크립트 예약어이기 때문이다.

JSX는 자바스크립트의 확장 언어이기 때문에

기존언어(class, for)를 쓰면 자바스크립트 문법(예약어)과 겹쳐서 위와 같이 다른 단어를 쓴다.

 

6. 주석은 {/*...*/}나 //를 사용하여 표시한다.

 

 

 

참고 블로그 : https://goddaehee.tistory.com/296