[리액트 스타터 3] 2장. JSX

2.1코드 이해하기

 

2.1.0 import React from 'react';

import 구문은 특정 파일을 불러오는 구문입니다. import를 통해 다른 파일을 불러오고 모듈도 불러와서 사용할 수 있습니다.

import React from 'react';

위의 코드는  React라는 모듈을 react라는 패키지에서 불러온다는 뜻입니다.

 

 

2.1.1 번들러와 로더

원래 브라우저에서는 import를 통해 모듈을 불러올 수 없습니다. 이런 기능을 브라우저에서도 사용하기 위해서는 번들러를 사용합니다. 번들러는 묶는다는 뜻으로 import를 통해 불러온 모듈을 모두 합쳐 하나의 파일로 만들어 줍니다. 또한 최적화를 통해 여러 개의 파일로의 분리도 가능합니다. 리액트에서는 주로 웹팩이라는 번들러를 사용합니다.

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

• import 식별자 from 파일의 경로 형태로 작성합니다.

웹팩을 사용하여 파일을 불러와서 사용할 수 있습니다. 파일들을 불러오는 작업을 수행하는 것이 웹팩의 로더입니다. 로더는 다양한 종류가 있습니다. css-loader는 css를, file-loader는 웹 폰트나 미디어 파일을 불러오고, babel-loader는 최신 자바스크립트 문법으로 작성된 코드를 바벨도구를 사용하여 ES5 문법으로 변환해줍니다. 

 

 

2.2 JSX란?

JSX는 자바스크립트의 확장문법으로 공식적인 자바스크립트 문법은 아니지만, JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 변환됩니다.

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

위처럼 작성된 JSX 코드는 아래와 같이 변환됩니다.

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

JSX코드를 사용하면 React.createElement 함수를 사용하지않고 편하게 UI를 렌더링 할 수 있습니다.

 

 

2.3 JSX의 장점

JSX의 장점은 크게 두가지가 있습니다.

1. 보기 쉽고 익숙합니다.
2. 활용도가 높습니다.

JSX 문법을 사용하여 코드를 작성하는 것은 HTML을 사용하여 작성하는 것과 비슷하기 때문에 자바스크립트에 비해 가독성도 높고 작성하기 쉽다고 느껴집니다.

또한 JSX에서는 HTML 태그를 사용할 수 있고, 컴포넌트도 JSX 안에서 작성할 수 있습니다.

 

 

2.4 JSX 문법

JSX를 사용하기 위한 9가지 규칙에 대해서 살펴보겠습니다.

 

 

2.4.1 감싸인 요소

컴포넌트에 여러 요소가 존재한다면 반드시 부모 요소 하나로 감싸 주어야 합니다.

function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>공부는 참 즐거워!^^</h2>
  )
}

export default App;

위의 코드에서 컴포넌트 안의 요소들이 부모 요소 하나에 의해 감싸져 있지 않았기 때문에 오류가 발생했습니다.

function App() {
  return (
    <div> //div 대신 fragment 사용가능- react 모듈에서 fragment 컴포넌트 불러와야 합니다. 
      <h1>리액트 안녕!</h1>
      <h2>공부는 참 즐거워!^^</h2>
    </div>
  )
}

export default App;

위 처럼 div 태드를 통해 하나의 요소로 감싸주어야 문제를 해결할 수 있습니다.  이렇게 리액트 컴포넌트에서 요소들을 하나의 요소로 감싸주어야 하는 이유는 Virtual Dom에서 컴포넌트의 변화를 감지하고 이를 비교할 때, Dom 트리 구조로 이루어져있으면 효과적으로 비교할 수 있기 때문입니다.

 

 

2.4.2 자바스크립트 표현

JSX는 Dom요소를 렌더링 하는 것 외에도 자바스크립트 표현식을 사용할 수 있습니다. 자바스크립트 표현식을 사용하기 위해서는 코드를 {  }로 감싸면 됩니다.

function App() {
  const name= '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>공부는 참 즐거워!^^</h2>
    </>
  )
}

export default App;

 

 

2.4.3 If문 대신 조건부 연산자

JSX내부에서는 If문을 사용할 수 없습니다. 조건에 따라 다른 내용을 렌더링 해야하는 경우에는 JSX 밖에서 If문을 사용하거나, {  } 안에 조건부 연산자(=삼항 연산자)를 사용하면 됩니다.

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

export default App;

 

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

&&연산자를 사용하여 더 짧은 코드로 조건부 렌더링을 할 수 있습니다.

function App() {
  const name ='뤼뤼액트';
  return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}

export default App;

위는 조건부 연산자로 구현된 코드입니다. 위의 코드를 실행하면 조건 값이 false이기 때문에 null을 렌더링하여, 아무것도 보이지 않습니다.

function App() {
  const name ='뤼뤼액트';
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;
}

export default App;

이때 &&연산자를 사용하면 코드를 줄일 수 있습니다. &&연산자를 통해 렌더링할 수 있는 이유는 리액트에서 false 값을 렌더링할 때 null과 똑같이 아무것도 나타내지 않기 때문입니다. 하지만 주의해야 할 점은 falsy 값을 갖는 0은 예외로 화면에 나타납니다.

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

위의 코드는 숫자 0을 출력합니다.

 

 

2.4.5 undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안 됩니다.

import './App.css';

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

export default App;

위처럼 undefined 값을 반환하면 오류가 발생하게 됩니다. 이런 경우 OR(||)연산자를 통해 값이 undefined일 때 사용할 값을 지정해 오류를 막을 수 있습니다.

import './App.css';

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

export default App;

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

import './App.css';

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

export default App;

변수의 값이 undefined일 때 보여주고 싶은 문구가 있으면 아래처럼 코드를 작성하면 됩니다.

import './App.css';

function App() {
  const name = undefined;
  return <div>{name || '리액트'}<div>;
}

export default App;

 

 

2.6 인라인 스타일링

리액트에서 Dom요소에 스타일을 적용할 때는 객체 형태로 넣어주어야 합니다. 예를 들어 background-color처럼 -가 표시되는 경우 -를 없애고 카멜 표기법으로 작성해야 합니다. 즉, background-color는 backgroundColor로 작성해야 합니다.

function App() {
  const name = undefined;
  const style = {
    backgroundColor: 'black';
    color: 'aqua';
    fontSize: '48px'
  };
  return <div style={style}>{name}</div>;
}

export default App;

이렇게 style 객체를 미리 선언하고 div 태그에서 값을 지정해주는 것 대신 바로 style 값을 지정해 줄 수도 있습니다.

function App() {
  const name = undefined;
  return (
    <div 
      style={{
        backgroundColor: 'black';
        color: 'aqua';
        fontSize: '48px'
      }}
    >
      {name}
    </div>
  );
}

export default App;

 

 

2.4.7 class 대신 className

HTML에서는 CSS를 사용할 때에는 class 속성을 설정하지만, JSX에서는 className으로 설정해주어야 합니다.

import './App.css';

function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}

export default App;

 

 

2.4.8 꼭 닫아야 하는 태그

HTML에서 <input>과 같이 열기만 하고 닫지 않아도 작동되는 경우가 있습니다. 하지만 JSX의 경우 태그를 닫지 않으면 오류가 발생합니다. 꼭 태그를 닫아주어야 합니다.

import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input>
    </>
  );
}

export default App;

태그 사이에 별 내용이 들어가지 않는 경우 선언과 동시에 닫아버리는 self-closing 태그를 통해 작성할 수도 있습니다.

• <input>   --->  <input />

 

 

 

2.4.9 주석

JSX 안에서 주석을 작성할 때는 {/*...*/}로 작성합니다. 또한 시작 태그를 여러 줄로 작성할 경우 그 태그 내부에서 //... 주석도 사용이 가능합니다.

import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      {/*주석을 작성해보자.*/}
      <div
        className="react" //여기에도 주석 작성 가능
      >
        {name}
      </div>;
      //여기는 출력 됨
      /*이 모양도 출력*/
      <input />
    </>
  );
}

export default App;

 

---

Corner React #3

Editor : 니나노