[React] JSX란?

HJ·2022년 4월 18일

Interview prep

목록 보기

2/12

해당 글은 인터뷰 준비 용으로 정리하였으므로 Interview Prep 폴더에 저장됩니다.

리액트를 시작하면 JSX라는 문법에 대해 익히는 것이 먼저인데, JSX를 사용하면서도 정리해서 본 적이 없는 것 같아 정리해보았다.

JSX란?

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. (바벨이란? 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 '구 표준'을 준수하는 코드로 변환해주는 것)
JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하고 쉽고, 가독성도 높다.
개발자가 JSX를 작성하기만 하면, 리액트 엔진은 JSX를 기존 자바스크립트로 해석하여 준다. 이를 '선언형 화면' 기술이라고 한다.

JSX 문법 특징

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 한다.

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

function App() { 
		return ( 
        		<div> 
  					<div>Hello</div> 
  					<div>Hi!</div> 
				</div> 
        ); 
}
<div></div>로 감싸거나, <Fragment></Fragment> 혹은 <></>로 감쌀 수 있다.

2. 자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

유효한 모든 JavaScript 표현식을 넣을 수 있다.

function App() { 
		const name = 'Dev';
		return ( 
        		<div> 
  					<div>Hello</div> 
  					<div>{Hi}!</div> 
				</div> 
        ); 
}

3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자) 를 사용 할 수 있다.

1) 외부에서 사용

function App() { 
		  let desc = ''; 
          const loginYn = 'Y'; 
          if(loginYn === 'Y') { 
          		desc = <div>회원 입니다.</div>;
                } else { 
                desc = <div>비회원 입니다.</div>; 
                } 
                return ( 
                <> 
                	{desc} 
                </> 
                ); 
}

2) 내부에서 사용 (삼항연산자)

function App() { 
          const loginYn = 'Y'; 
          return ( 
          		  <> 
                  	<div> 
  						{loginYn === 'Y' ? ( 
  							<div>회원 입니다.</div>
  						) : ( 
  							<div>비회원 입니다.</div>
  						)} 
					</div> 
                  </> 
          );
}

3) AND연산자(&&) 사용

function App() { 
          const loginYn = 'Y'; 
          return ( 
          		  <> 
                  	<div> 
  						{loginYn === 'Y' && <div>회원 입니다.</div>}
					</div> 
                  </> 
          );
}

4) 즉시실행함수 사용

function App() { 
          const loginYn = 'Y'; 
          return ( 
          		  <> 
                  	{ 
                     (() => { 
                     		if(loginYn === "Y"){ 
                            	return (<div>회원 입니다.</div>); 
                            }else{ 
                            	return (<div>비회원 입니다.</div>); } 
                            })() 
                           }
                  </> 
          );
}

5) undefined를 렌더링하지 않아야 한다.

OR 연산자를 사용해 방지할 수 있다.

단, JSX 내부에서 undefined를 렌더링 하는 것은 에러가 나지 않는다.

function App() {
  const name = undefined;
  return (
  	<div>{name}</div>
  )
}

4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다.

1) JSX 스타일링

JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.
카멜 표기법으로 작성해야 한다. (font-size => fontSize)

2) class 대신 className

JSX에서는 class가 아닌 className 을 사용한다.

5. JSX 내에서 주석 사용 방법

{/…/} 혹은 //를 사용한다.

출처: https://goddaehee.tistory.com/296
https://chanhuiseok.github.io/posts/react-3/