[React] JSX

JSX

JSX란?

Javascript 를 확장한 문법입니다. JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 BABEL을 사용하여 일반 자바스크립트의 형태로 변환됩니다. 예를 들어 아래 코드는 동일한 내용입니다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
); // JSX로 작성된 코드

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
); // BABEL로 변환된 코드

왜 JSX를 사용할까요?

1. 보기 쉽고 익숙합니다
   일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해보면 JSX로 작성한 코드가 가독성이 높을 뿐 아니라 작성하기도 쉽습니다. (HTML코드를 작성하는것과 비슷하니까요)
2. 활용도가 높습니다
   JSX에서는 자주 사용하는 div span 태그를 사용할 뿐만 아니라 컴포넌트도 JSX 안에서 작성할 수 있습니다.

// src/index.js 파일입니다
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; 

ReactDOM.render(
  <React.StrictMode>
  <App /> //App 컴포넌트를 HTML 태그 쓰듯이 그냥 작성하는걸 확인할 수 있습니다.
  </React.StrictMode>,
  document.getElementById('root')
);

3. XSS (cross-site-scripting) 공격을 방지합니다
   XSS 란?
   https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85
   ReactDOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링되기 전에 문자열로 변환됩니다.

JSX 문법

1. 감싸인 요소
   컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

funtion App(){
  return(
    <h1>리액트야 안녕!</h1>
    <h2>만나서 반가워!</h2>
    )
}
export defalt App;

위와 같은 코드는 오류가 나타납니다. 요소 여러개가 부모 요소에 감싸져 있지 않기 때문입니다. 아래 코드로 바꿔 해결할 수 있습니다.

funtion App(){
  return(
   <div> 
    <h1>리액트야 안녕!</h1>
    <h2>만나서 반가워!</h2>
   </div> 
    );
}
export defalt App;

div 요소를 사용하기 싫다면 Fragment 라는 기능을 이용할 수 있습니다.

import { Fragment } from 'react';

funtion App(){
  return(
   <Fragment> 
    <h1>리액트야 안녕!</h1>
    <h2>만나서 반가워!</h2>
   </Fragment> 
    );
}
export defalt App;

Fragment는 아래와 같은 형태로도 사용할 수 있습니다.

import { Fragment } from 'react';

funtion App(){
  return(
   <> 
    <h1>리액트야 안녕!</h1>
    <h2>만나서 반가워!</h2>
   </> 
    );
}
export defalt App;

왜 리액트 컴포넌트에서 요소 여러개를 하나의 요소로 감싸주어야만 하나요?

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

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

import { Fragment } from 'react';

funtion App(){
  const name = 'harimrim'
  return(
   <> 
    <h1>{name} 안녕!</h1>
    <h2>만나서 반가워!</h2>
   </> 
    );
}
export defalt App;

3. if문 대신 조건부 연산자(삼항연산자)
   삼항연사자의 문법은 아래와 같습니다. { } 안에 조건부 연산자를 사용하면 됩니다.
   조건 ? 조건이 참(ture)일 때 실행할 코드 : 조건이 거짓(false)일 때 실행할 코드

import { Fragment } from 'react';

funtion App(){
  const name = 'harimrim'
  return(
   <div>
    {name === 'harimrim' ? (<h1>harimrim</h1>) : (<h2>누구세용?</h2>)}
  //       조건                 참일때 실행               거짓일때 실행
   </div> 
    );
}
export defalt App;

4. AND 연산자 (&&)를 사용한 조건부 렌더링
   특정 조건을 만족할 때만 내용을 보여주고, 만족하지 않을 때는 아무것도 렌더링하지 않을 때 조건부 연산자를 통해서 구현할 수 있습니다.

import { Fragment } from 'react';

funtion App(){
  const name = 'harimrim'
  return(
   <div>
    {name === 'harimrim' && (<h1>harimrim</h1>)}
  //       조건                 참일때 실행         
   </div> 
    );
}
export defalt App;

&& 연산자로 조건부 렌더링이 가능한 이유는 리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타내지 않기 때문입니다. 다만 한가지 주의할 점은 falsy한 값이 0은 예외적으로 화면에 나타나기 때문에 주의해야 합니다.

const number = 0;
return number && <div>내용</div> // 이런 코드는 화면에 숫자 0을 보여줍니다.

5. undefined를 렌더링하지 않기!
   리액트 컴포넌트에서는 함수에서 undefined만 반환해서 렌더링하는 상황을 만들면 안됩니다.

function App() {
  const name = undefined;
  return name;
} // error 뿜뿜

OR 연산자를 사용하여 해당 값이 undefined 일 때 사용할 값을 지정해서 오류를 방지할 수 있습니다.

funtion App() {
  const name = undefined;
  return <div>{name || 'undefined 입니다!'}</div>;
}

OR 연산자는 a || b 둘 중 하나라도 true 라면 식이 성립되기 때문에 true인 문자열이 출력됩니다.

다만, JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

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

6. 인라인 스타일링
   리액트에서 DOM 요소에 스타일을 적용할 때는 객체 형태로 넣어주어야 합니다. 또한 스타일 이름 중에서 - 문자가 포함될 경우 - 문자를 없애고 카멜 표기법으로 작성합니다.

funtion App(){
 const name = 'harimrim'
 const style = {
   backgroundColor : 'black', // background-color -> backgroundColor
   color : 'blue',
   fontSize : '48px' //font-size -> fontSize
 };
  return <div style={style}> {name} </div>;
}

// style 객체를 미리 선언하지 않고 바로 style 값을 지정하는 것도 가능합니다.
funtion App(){
 const name = 'harimrim'
 return (
   <div 
   	 style={{
   		backgroundColor : 'black',
   		color : 'blue',
   		fontSize : '48px'
   }}
  >
    {name}
 </div>
);
}

7. class X className O
   일반 HTML 에서 클래스를 사용할 때는 <div class="클래스명"></div> 처럼 사용했는데요, JSX에서는 className 으로 설정해줘야 합니다

funtion App() {
  const name = 'harimrim'
  return <div className ="harimrim">{name}</div>;
}

8. 꼭 태그를 닫아주세요
   HTML 에서는 <input> 처럼 태그를 닫지 않고도 잘 작동하는 태그들이 JSX에서는 태그를 닫지 않으면 오류가 발생합니다. 그러므로 반드시 태그를 닫아 주어야 합니다. 태그 사이에 별도의 내용이 들어가지 않는 경우에는 아래와 같이 작성할 수 있으며, self-closing 태그라고 부릅니다. 태그를 선언하면서 동시에 닫는 태그입니다.

funtion App(){
  const name = 'harimrim';
  return (
    <>
     <div className='harimrim'>{name}</div>
	 <input />   //self-closing
    </>
 );
}

9. JSX에서 주석 사용법
   {/*주석내용주석내용*/} 형태로 작성합니다. 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // 주석 같은 형태로도 작성할 수 있습니다. (다른 위치에선 사용할 수 없습니다.)

참고자료

리액트를 다루는 기술 (김민준 저자)
React 문서 https://ko.reactjs.org/docs/getting-started.html