React JSX

JSX

# 시작하며

리액트 프로젝트를 생성하여 사용하기 위해서는, 다음과 같이 React를 import하는 것이 필요하다.

import React from 'react';

위 코드는 React를 불러와 사용이 가능하도록 해준다. 리액트 프로젝트를 만들 때 npm install 명령어를 통해 node_modules라는 디렉터리도 함께 생성하는데, 해당 과정에서 node_modules 디렉터리 내부에 react module이 생성된다. 따라서 최종적으로 import 구문을 통해 리액트를 불러와 사용할 수 있는 것이다.

 

이렇게 모듈을 불러와 사용하는 것은 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 JS 실행을 가능하게 하는 환경인 Node.js에서 지원하는 기능이다. 이러한 기능을 브라우저에서 사용하기 위해 bundler를 사용하는데, 대표적으로 웹팩이 있다.

 

# JSX

JSX는 JS의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이러한 형식으로 작성된 코드는, 번들링 과정에서 바벨을 사용하여 일반 JS 코드로 변환 과정을 거친다. 

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

가령 위와 같이 작성된 JSX 코드는, 

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

다음과 같이 JS 코드로서 변환되어 적용된다. JSX를 사용하면, 매번 JS로서 사용해야 하는 수고를 덜 수 있고, 보다 직관적이기 때문에 코드를 이해하기 쉬워 UI를 편하게 렌더링할 수 있다. 

 

• JSX 장점

1. 가독성이 좋고 익숙하다.

일반 JS만 사용한 코드와, JSX로 작성한 위의 두 가지 코드를 비교해보면 장점을 확실히 알 수 있다. 얼핏 보아도 JSX를 사용하는 것이 가독성이 더 높고 작성하기도 쉽다는 것이 느껴질 것이다. 코드 형식에 있어 HTML과 비슷하기 때문에 보다 직관적으로 이해가 가능하다. 이러한 이유들이 JSX를 사용하는 주된 이유라 할 수 있다.

 

2. 높은 활용도

JSX는 우리가 알 고 있는 <div>나 <span> 같은 HTML 태그를 사용할 수 있을 뿐 아니라, 앞으로 만들 Component 역시 JSX 안에서 작성이 가능하다. 앞서 만든 function component App 역시 <App/> 형태로 HTML 태그처럼 사용할 수 있다.

ReactDOM.render(
    <React.StrictMode>
      <App/>
    </React.StrictMode>
    document.getElementById('root')
);

 

* ReactDOM.render

- 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다. 해당 함수의 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고, 두 번째(document.getElementById)로는 해당 JSX를 렌더링할 document 내부 요소를 설정한다.

* React.StrictMode

- 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 한다. 해당 코드를 사용하면, ref, compomentWillMount 등 옛날 기능을 사용했을 때 경고를 출력한다.

 

 

# JSX 문법

위에서 알아보았듯이 JSX는 가독성이 좋고 편리한 문법이지만, 올바르게 사용하기 위해서는 몇 가지 규칙을 준수해야 한다.

 

1. 감싸인 요소

- 먼저 감싸인 요소가 있다. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야 한다. 

return(
   <p>sample_1</p>
   <p>sample_2</p>
)

가령 위와 같은 코드처럼 각각의 태그들을 부모 요소로 감싸지 않고 병렬적으로 입력했다면, 문법에 맞지 않는 것이다. 

return(
 <div>
   <p>sample_1</p>
   <p>sample_2</p>
 </div>
)

따라서 위 코드와 같이 부모 요소 하나로 감싸주면 오류가 발생하지 않는다. 그렇다면 왜 이렇게 여러개의 요소를 하나로 감싸주어야 하는 것일까? 

그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교가 가능하도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문이다. <div> 이외에도 리액트 v16 이상부터 도입된 Fragment라는 기능을 사용할 수도 있다.

 

 

2. 자바스크립트 표현

- JSX가 단순히 DOM 요소를 렌더링하는 기능 뿐 아니라, JSX 내부에서 JS 표현식을 사용할 수 있다. 이를 위해서는 JSX 내부에서 { } 괄호를 사용하여 코드를 감싸서 작성한다.

const name = "react";

 return(
  <>
   <h1>{name}</h1>
  </>
 )

 

 

3. If 문 (x), 조건부 연산자(o)

- 조건에 따라 다른 내용을 렌더링해야 할 때는, JSX 외부에서 if 문 사용이 가능하지만, JSX 내부에서는 if 문을 사용할 수 없다. 따라서 상태 설정을 위해서는, 외부에서 if문을 통해 사전에 값을 설정하거나 { } 내부에 조건부 연산자를 사용하면 된다. 

return(
  <div>
   {name==="react" ? <p>true</p> : <p>false</p> 
  </div>
);

 

 

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

- 개발을 진행하다보면, 조건을 만족했을 때 내용을 출력하고, 그렇지 않을 때 아무것도 렌더링 하지 않아야할 때가 발생한다. 이러한 경우에도 조건부 연산자를 사용한다. 하지만 이러한 조건부 연산자를 사용할 때, (&&) 연산자를 통해 조건을 중복해서 제시할 수 있고, 조건과 AND 연산자를 연결시킴으로써 코드를 간결하게 할 수도 있다.

 

 

5. undefined 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들어서는 안된다. undefined를 return해서는 안되기 때문에, OR(||) 연산자를 사용하여 undefined일 때 사용할 값을 상태 설정하여 오류를 간단하게 방지할 수 있다.

 

 

6. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 한다. 문자 중간에 - 가 포함되면 - 를 없애고 camelCase로 변환해 주어야 한다.