[리액트 공식문서 파헤치기] JSX

JSX : JavaScript Xml 

JSX는 HTML과 유사하지만 HTML은 아닌 언어(자바스크립트에 더 가깝다)로 XML 형식의 코드를 이용해 코드를 작성할 수 있게 하는 자바스크립트 확장 언어이다.

 

JSX의 문법을 알아보겠다.

 

1. JSX의 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다.

즉, 컴포넌트에 여러 요소가 있을 때, 이를 감싸주는 부모 요소가 있어야 한다. 

 

function App(){
	return(
    	<p>1번째 요소</p>
        <p>2번째 요소</p>
    )
}

 

만약 이렇게 작성했다면, 다음과 같은 오류가 발생한다.

 

SyntaxError: /Users/sennie/wpet-client/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. 

 

'JSX 요소들은 감싸는 태그로 둘러쌓여야 한다' 라는 의미인데 위의 코드는 <p>태그가 2개가 있으니 이를 감싸주는 태그가 반드시 필요하다. 아래 코드처럼 <div>태그로 감싸주면 오류가 나지 않는다. 

 

function App(){
	return(
    	<div>
    		<p>1번째 요소</p>
        	<p>2번째 요소</p>
        </div>
    )
}

 

2. 표현식(자바스크립트 코드)을 JSX 안에서 랜더링할 수 있다.

 

function formatName(user){
	return user.firstName + ' '+ user.lastName;
}

const user = {
	firstName: 'Kamea',
    lastName: 'Lim'
};

const element = {
	<h1>Hello, {formatName(user)}</h1>
};

 

여기서 주의할 것이 하나 있다.

JSX를 if 조건문, for 반복문 안에 사용하는 것은 가능하지만, JSX 내부에서는 if 조건문을 사용할 수 없고 삼항연산자를 사용해야 한다.

 

# jsx를 if 조건문 안에서 사용하는 경우
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

# JSX 내부에 if문을 사용하고 싶은 경우 : 삼항 연산자
function App() {
    const name = 'Kamea';
  	return (
   	<div>
          {name === 'Kamea'? (
          	<h1>이름이 Kamea 맞음</h1>
          ) : (
          	<h2>이름이 Kamea가 아님</h2>
          )}
      
   	</div>
      
  );
}

 

3. JSX은 자식을 가질 수 있다.

 

const element = {
	<div>
    	<h1>Hello</h1>
        <h2>World</h2>
    </div>
}

 

 

4. JSX에서 스타일을 지정할 때나 속성을 지정할 때에는 카멜 표기법으로 작성해야 한다.

 

background-color => backgroundColor

font-size => fontSize

 

function App() {
  const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }
  return (
  	<div style={style}>테스트</div>
  )
}

 

기존에 <div class="header"></div>와 같은 클래스 이름을 지정할 때에 class가 아닌 className을 사용해야 한다.

 

<div className="header"></div>

 

5. JSX의 주석

JSX에서는 {/* */} 으로 주석을 표시한다. 단, 태그 내부에서는 //을 사용하여 주석 작성이 가능하다.