[React] 리액트 공부 - JSX

리액트 프로젝트를 생성하고 실행해보기

작업환경

• Node.js  22.x
• Mac OS
• WebStorm

JSX

프로젝트를 생성하고 `App.js`파일을 보면 아래와 같은 모습을 볼 수 있다.

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;

위 코드는 `function`키워드를 사용하여 App이라는 컴포넌트를 만든다. 이때 함수에서 반환하고 있는 코드는 마치 HTML을 작성한 것 같은데 이러한 코드를 JSX라 한다.

JSX로 작성된 코드가 브라우저에서 실행되기 전 번들링 되는 과정에서 일반 자바스크립트 형태의 코드로 변환된다.

JSX는 보기가 쉽고 익숙하다는 장점이 있다. 자바스크립트로 요소를 하나하나 만든다면 불편하겠지만 JSX를 사용한다면 HTML을 작성하는 것과 비슷하기에 가독성과 편리함을 가질 수 있다. 또한 HTML의 태그를 사용할 수 있으며 이렇게 만든 컴포넌트를 HTML태그를 작성하듯 작성할 수 있다. `<App />`이라는 문장을 사용한다면 다른 곳에서 위에서 작성한 App 컴포넌트를 불러올 수 있다는 것이다.

문법

1. 여러 요소가 존재한다면 반드시 부모 요소에 감싸야 한다.

function App() {
  return (
    <h1>요소 하나</h1>
    <h1>요소 둘</h1>
  );
}

export default App;

위 코드는 요소 두 개가 부모요소에 감싸여있지 않기때문에 오류가 발생한다. 위와 같은 코드를 제대로 작성하려면 아래와 같이 두 요소를 감싸는 하나의 부모 요소가 있어야된다.

function App() {
  return (
    <div>
      <h1>요소 하나</h1>
      <h1>요소 둘</h1>
    </div>
  );
}

export default App;

이때 div 태그 대신 `Fragment`태그를 사용할 수도 있다. Fragment 코드는 아래처럼 `<> </>`로 빈 태그로도 표현할 수 있다.

function App() {
  return (
    <Fragment>
      <h1>요소 하나</h1>
      <h1>요소 둘</h1>
    </Fragment>
  );
}

export default App;


function App() {
  return (
    <>
      <h1>요소 하나</h1>
      <h1>요소 둘</h1>
    </>
  );
}

export default App;

2. 자바스크립트 표현

JSX 내부에서 자바스크립트 표현식을 사용할 수 있다. JSX 내부에서 표현할 코드를 `{ }`로 감싸면 된다.

function App() {
  const name = '요소';
  return (
    <div>
      <h1>{name} 하나</h1>
      <h1>요소 둘</h1>
    </div>
  );
}

export default App;

3. 조건 연산자

JSX 내부 `{ }`자바스크립트 연산식에서는 if문을 사용할 수 없기때문에 JSX 밖에서 연산 후 사용하거나 조건 연산자를 사용해야한다. 조건 연산자는 아래와 같이 사용할 수 있다.

function App() {
  const name = '하나';
  return (
    <div>
      {name === '하나' ? (
        <h1>요소 하나</h1>
      ) : (
        <h1>요소 둘</h1>
      )}
    </div>
  );
}

export default App;

4. &&연산자

&&연산자를 통해 if문을 대신할 수 있다.

const value = false;
return value && <div>내용</div>;

위 처럼 `&&`연산자를 사용하면 왼쪽 값이 true라면 오른쪽 값을 반환하게 된다. 하지만 왼쪽값이 false(falsy)일 경우에는 출력이 되지 않는다. 자바스크립트에서 falsy로 판단되는 값은 아래와 같다.

• `false`
• `0`
• `""` (빈 문자열)
• `null`
• `undefined`
• `NaN`

위 값들 중 `0`, `""`는 예외적으로 화면에 출력된다.

5. undefined 렌더링 하지 않기

함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안됨.

6. 인라인 스타일링

요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어주기

스타일 이름은 `-`를 사용하지 말고 카멜 표기법 사용하기. `background-color` -> `backgroundColor`

7. class 대신 className

요소에 CSS설정할 때 class를 사용하는데 이때 `className`을 사용한다. 

<div className="App">

8. 태그는 꼭 닫기

9. 주석

JSX안에서 주석은 아래처럼 사용한다.

{/*주석은 이렇게*/}
<div className="App" //시작태그 안에서는 이렇게 사용 가능
      >