리액트를 다루는 기술 - 02. JSX

목록

1. 포스팅 개요
2. 본론
     2-1. 코드 이해하기
     2-2. JSX란?
     2-3. JSX의 장점
     2-4. JSX 문법
     2-5. ESLint와 Prettier 적용하기
3. 요약

1. 포스팅 개요

해당 포스팅은 리액트를 다루는 기술의 02장 JSX 를 학습하며 정리한 포스팅이다.

2. 본론

2-1. 코드 이해하기

• yarn

$ yarn create react-app [프로젝트 이름]  

• npm

$ npx create react-app [프로젝트 이름  

or  

$ npm init react-app [프로젝트 이름]  

• 프로젝트 구동
  • 프로젝트 디렉터리 이동 후, start

// yarn$ yarn start  
// npm$ npm start

import logo from './logo.svg';  
import './App.css';  

function App() {  
  return (  
    <div className="App">  
      <header className="App-header">  
        <img src={logo} className="App-logo" alt="logo" />  
        <p>          Edit <code>src/App.js</code> and save to reload.  
        </p>  
        <a          className="App-link"  
          href="https://reactjs.org"  
          target="_blank"  
          rel="noopener noreferrer"  
        >  
          Learn React  
        </a>  
      </header>    
  </div>  
}  

export default App;

Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용하는데, 번들(bundle)은 묶는다는 뜻이다.
대표적인 번들러로 웹팩, Parcel, browserify 라는 도구들이 있고,
리액트 프로젝트에서는 주로 웹팩을 사용하는 추세다.
편의성과 확장성이 다른 도구보다 뛰어나기 때문이다.

function App() {  
  return (  
    <div className="App">  
      <header className="App-header">  
        <img src={logo} className="App-logo" alt="logo" />  
        <p>          Edit <code>src/App.js</code> and save to reload.  
        </p>  
        <a          className="App-link"  
          href="https://reactjs.org"  
          target="_blank"  
          rel="noopener noreferrer"  
        >  
          Learn React  
        </a>  
      </header>    
  </div>  
}  

위의 코드는 function 키워드를 사용하여 컴포넌트를 만들었는데, 이러한 컴포넌트를 함수형 컴포넌트라고 한다.

또한 함수에서 반환하고 있는 HTML도, JS도 아닌 것 같은 부분은 JSX라고 부른다.

2-2. JSX란?

• JSX는 자바스크립트의 확장 문법이다.
• 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트의 형태의 코드로 변환된다.

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

위의 코드는 아래와 같이 변환된다.

function App() {
    return React.createElement("div")
}

참고로 JSX는 자바스크립트 문법이 아니다.

2-3. JSX의 장점

• 보기 쉽고 익숙하다.

  • 자바스크립트로 요소들을 일일이 만들어야 한다면 불편해서 사용하고 싶지 않을 것이다.

• 높은 활용도를 지닌다.

  2-4. JSX 문법

• 감싸인 요소

  • 컴포넌트에 여러 요소가 있다면 반드시 부묘 요소 하나로 감싸야 한다.

import logo from './logo.svg';  
import './App.css';  

function App() {  
  return (  
    <div>  
        <h1>안녕 리액트</h1>  
        <h2>하이</h2>  
    </div>  
    )  
}  

export default App;

div로 감싸지 않으면 에러가 발생한다.

요소 여러 개를 하나의 요소로 감싸야 하는 이유

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

그리고 div 태그를 사용하고 싶지 않다면, 리액트 v16 이상부터 도입된 Fragment라는 기능을 사용하면 된다.

import logo from './logo.svg';  
import './App.css';  

function App() {  
  return (  
    <Fragment>  
        <h1>안녕 리액트</h1>  
        <h2>하이</h2>  
    </Fragment>  
    );
}

Fragment는 다음과 같은 형태로 표현 가능하다.

import logo from './logo.svg';  
import './App.css';  

function App() {  
  return (  
    <>  
        <h1>안녕 리액트</h1>  
        <h2>하이</h2>  
    </>  
    );
}

자바스크립트 표현

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

import '../App.css';  

function App() {  
  const name = '리액트';  

  return (  
      <> {/* div대신에 쓰는 Fragment 태그 = 리액트 16.0 부터 도입됨. <div> 와 같은 기능을 한다. <Fragment> 와 동일하다. */}  
        {/* 자스 문법 사용하려면 '{}' 대괄호 안에 넣으면 된다. */}  
        <h1>{name}! 안녕</h1>  
        <h2>하이</h2>  
      </>  );  
}  

export default App;

if문 대신 조건부 연산자

• JSX 내부의 자바스크립트 표현식에서는 if 문을 사용할 수 없다.
• 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.

import logo from '../logo.svg';  
import '../App.css';  

function App() {  
  const name = '리액트';  

  return (  
      <>  
        {name === '리액트' ? (<h1>리액트입니다.</h1>) :(<h2>리액트가 아닙니다.</h2>)}  
      </>  
  );  
}  

export default App;

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

import '../App.css';  

function App() {  
  const name = '리액트';  
  const number = 0;  

  return (  
      <>  
        {/*{name === '리액트' ? (<h1>리액트입니다.</h1>) : null} /!* null은 아무것도 보여주지 않는다. *!/*/}  
        {name === '리액트' && <h1>리액트입니다.</h1>}  
          {number && <div>내용</div>}  
      </>  
  );  
}  

export default App;

참고로 falsy한 값인 0은 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

위의 코드는 화면에 숫자 0을 보여준다.

• JSX는 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 감싸지 않는다.
• JSX를 괄호로 감싸는 것은 필수 사항이 아니다.
• 감싸도 되고 감싸지 않아도 된다.

undefined 렌더링하지 않기

import '../App.css';  

function AppUndefindedNoRendering() {  
    // 리액트 버전 18부터 에러 X    // const name = undefined;    // return name;  
    // JSX는 허용  
    const name = undefined;  
    return <div>{name || '리액트'}</div>; // name이 undefinded일 때 이런 식으로 하면 됨.  
}  

export default AppUndefindedNoRendering;

※ 책에서는 오류가 뜬다고 나오지만, 18부터는 허용된다. 그리고

어떤 값이 undefined일 수도 있다면, OR(||) 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import React from 'react';
import './App.css'

function App() {
    const name = undefined;
    return name || '값이 undefined입니다.';
}

export default App;

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import React from 'react';
import './App.css'

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

export default App;

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

인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 한다.
스타일 이름 중 background-color처럼 -문자가 포함되는 이름이 있는데, 이러한 이름이 있는데, - 문자를 없애고 카멜 표기법으로 작성한다.

import '../App.css';  

function InlineStylingApp() {  
    const name = '리액트';  
    const style = {  
        // background-color는 backgroundColor와 같이 '-'가 사라지고 카멜 표기법으로 작성한다.  
        backgroundColor: 'black',  
        color: 'aqua',  
        fontSize: '48px', // font-size -> fontSize  
        fontWeight: 'bold', // font-weight -> fontWeigt  
        padding: 16 // 단위를 생략하면 px로 지정  
    };  
    return <div style={style}>{name}</div>  

}  

export default InlineStylingApp;

class 대신 className

• JSX를 작성할 때 CSS 클래스를 설정하는 과정에서 className이 아닌 class 값을 설정해도 스타일이 적용되기는 한다.
• 하지만 그렇게 사용하면 브라우저 개발자 도구의 Console 탭에서 class를 className으로 변환시켜주고 경고가 나타난다.

꼭 닫아야 하는 태그

import '../ClassInsteaedClassNameApp.css';  

function MustCloseTagApp() {  
    const name = '리액트';  
    return (  
        <>  
            <div className="react">{name}</div>  
            {/*<input></input>  /!* 반드시 닫아주어야한다. 안 그러면 오류가 발생한다. */}  
            <input />  {/* 태그 안에 아무 값도 들어가지 않는 경우에 이런 식으로 사용. self-closing 태그라고 한다. */}  
        </>  
    );  
}  

export default MustCloseTagApp;

• 태그 사이에 별도의 내용이 들어가지 않는 경우에는 self-closing 태그를 선언하면서 동시에 닫을 수 있다.

주석

JSX 내부에서 주석을 작성할 때는 {/*...*/} 와 같은 형식으로 작성한다.
여러 줄로 작성할 수 있다.

import '../ClassInsteaedClassNameApp.css';  

function CommentApp() {  
  const name = '리액트';  

    return (  
        <>  
            {/* 주석은 이렇게 작성한다. */}  
            <div  
                className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기세 작성할 수도 있다.  
            >  
                {name}  
            </div>  
            // 이런 주석이나,  
            /* 이런 주석을 페이지에 그대로 나타난다.  
            <input/>  
        </>    );  
}  

export default CommentApp;

그리고 시작 태그를 여러 줄로 작성할 때는 그 태그 내부에서 // ...과 같은 형태의 주석도 작성할 수 있다.

2-5. ESLint와 Prettier 적용하기

• WebStrom에서 기본적으로 지원하는 기능들이라서 pass;

3. 요약

JSX에 대해서 간단하게 알아보았다.