(6) JSX 3

(5) undefined를 렌더링하지 않기

* 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다. 예를 들어 다음과 같은 코드는 오류를 발생시킨다.

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

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

export default App;

* 어떤 값이 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;

* name 값이 undefined일 때 보여주고 싶은 문구가 있다면 다음과 같이 코드를 작성하면 된다.

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

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

export default App;

---

(6) 인라인 스타일링

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

* 다음 예시 코드를 따라 작성해 보자.

import React from "react";

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

export default App;

* 지금은 style 객체를 미리 선언하고 div의 style 값으로 지정해 주었는데, 미리 선언하지 않고 바로 style 값을 지정하고 싶다면 다음과 같이 작성하면 된다.

import React from "react";

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

export default App;

* 똑같은 결과가 출력된다.

---

(7) class 대신 className

* 일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div> 와 같이 class라는 속성을 설정한다. 하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

* 우선 src 디렉터리 안에 있는 App.css를 열어서 내부 내용을 다 지운 뒤에 새로운 CSS 클래스를 작성해 보자.

.react {
  background-color: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

* 이번에는 기존 App 컴포넌트에서 인라인 스타일에 사용한 폰트 색상과 배경색을 뒤바꾼 스타일이다.

* 이제 App.js 파일에서 상단에 App.css를 불러온 뒤 div 요소에 className 값을 지정해 주자.

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

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

export default App;

* 코드를 저장하고 브라우저에 다음과 같은 화면이 나타나는지 확인해 보자.

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

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

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

export default App;

* 이전에는 class로 CSS 클래스를 설정할 때 오류가 발생하고 CSS 클래스가 적용되지 않았는데, 리액트 v16 이상부터는 class를 className으로 변환시켜 주고 경고를 띄운다.

---

(8) 꼭 닫아야 하는 태그

* HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 한다. 예를 들면 input HTML 요소는 <input></input>이라 입력하지 않고 <input>이라고만 입력해도 작동한다. HTML에서는 다음과 같은 코드는 문제없이 작동한다.

<form>
    성 : <br>
    <input><br>
    이름 : <br>
    <input><br>
</form>

* 위 코드에서 br과 input 태그는 열기만 하고 닫지 않았다.

* JSX에서는 위 코드처럼 태그를 닫지 않으면 오류가 발생한다. 다음과 같이 App.js를 한번 수정해 보자.

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

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

export default App;

* 코드를 저장하면 개발 서버가 실행 중인 터미널에서 다음과 같이 오류가 나타날 것이다.

* 이 오류를 해결하려면 다음과 같이 input 태그를 닫아 주어야 한다.

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

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

export default App;

* 태그 사이에 별도의 내용이 들어가지 않는 경우에는 다음과 같이 작성할 수도 있다. 이러한 태그를 '열린 태그(self-closing)' 라고 부른다. 태그를 선언하면서 동시에 닫을 수 있는 태그이다.

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

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

export default App;

---

(9) 주석

* JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 떄와 조금 다르다. 다음 코드를 살펴보자.

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

function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 작성한다. */}
      <div 
        className="react" // 시작 태그를 여러 줄로 작성하게 된다면 여기에 주석을 작성할 수 있다.
      >
        {name}
      </div>
      // 하지만 이런 주석이나
      /* 이런 주석은 페이지에 그대로 나타나게 된다. */
    </>
  );
}

export default App;

* JSX 내부에서 주석을 저장할 때는 { /* ... */ } 와 같은 형식으로 작성한다. 이렇게 여러 줄로 작성할 수도 있다. 그리고 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // ... 과 같은 형태의 주석도 작성할 수 있다.

* 만약 일반 자바스크립트에서 주석을 작성할 때처럼 아무 데나 주석을 작성하면 그 주석은 페이지에 고스란히 나타나게 된다.