리액트(React) 스터디일지3 : JSX

 

기본 강의를 숙지하고 책의 예제를 따라 하기 위해 리액트에서 제공하는 CRA(Create React App) 프로젝트를 신규로 생성해서 공부를 하려 하였습니다. 

 

기분 좋게 신규 프로젝트 생성

$ npx create-react-app my-app

$ npx create-react-app my-app

하지만 폴더만 생성되었을 뿐 폴더 안에는 어떠한 내용도 생성되지 않았습니다. 이 문제로 한참 동안 시간을 허비하였는데 이는 기존에 설치한 CRA를 삭제하고 다시 설치하여야만 설치가 된다는 걸 알게 되었습니다. 

기존에 global 옵션으로 create-react-app을 설치했다면 아래 커맨드로 삭제해야 합니다.

 

$ npm uninstall -g —-save create-react-app

 

아래와 같은 에러가 나온는 분도 있을겁니다. 아래의 오류는 SSL 관련 오류인데 이것 역시 터미널에서 해결이 가능합니다.

error An unexpected error occurred: "https://registry.yarnpkg.com/react: self signed certificate in certificate chain".

npm 

npm config set strict-ssl false

yarn

yarn config set "strict-ssl" false

 

그리고 다시 터미널에서 npx 명령어로 리액트 신규 프로젝트를 생성하면 프로젝트가 생성됩니다. 

 

자!  무엇이든 시작이 반이라고 했습니다. 이제 험난한 첫 고지를 넘었습니다.

이제 yarn을 설치합니다. 자세한 설치 방법은 yarn 사이트에서 확인하면 됩니다. yarn은 npm을 대체할 수 있는 도구 npm보다 빠르며 효율적인 캐시 시스템, 부가기능 제공합니다. 그렇지만 반드시 꼭 설치를 하여야 하는 것은 아닙니다. 저는 책에서 설명한 환경과 동일하게 작업하기 위해 설치를 하였습니다.

 

Mac 유저는 터미널을 통해서 설치하고 Window유저는 프로그램을 다운받아서 설치하면 됩니다.  

 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    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;

처음 프로젝트를 설치하고 App.js 파일을 열어보면 우리가 마주하게 되는 화면입니다. html과 javascript를 공부하신 분들이라면 무언가 익숙하면서도 낯선 느낌을 받으실 수 있습니다.

 

분명 확장자는 js인데 안에 코드는 HTML이니 조금은 당황할 수 있을것 같습니다.

이는 리액트의 JSX라는 문법입니다. HTML과 비슷하지만 HTML도 아니고 그렇다고 문자열도 아닙니다. 자바스크립트의 확장 문법으로 XML과 더 유사하다고 할 수 있습니다. 바벨을 사용하여 일반 자바스크립트 형태로 변환되는 것입니다.

 

바벨?? 나는 그런거 설치한 적 없는데...라고 생각할 수 있는데 CRA를 통해서 프로젝트를 생성하면 그 안에 기본적인 모듈들이 자동으로 설치됩니다. 그중 바벨도 포함되어 있습니다.

 

그럼 위의 코드가 일반적으로 무엇이 다른지 하나씩 살펴볼게요.

 

1. import 

import React, { Component } from 'react';

import 한다는것은, 무엇을 불러온다는 것입니다. 첫 번째 코드는 리액트와 그 내부의 Component를 불러옵니다. JSX를 사용하려면, 반드시 React를 import 해주어야 합니다.

 

2.ClassName

<div className="App">
	...
</div>

또 다른 특징으로는 ClassName이라는게 보이네요. 클래스라는 이름이 스크립트에서 내장함수이기 때문에 충돌되지 않게 하기 위하여 우리가 태그에 사용하는 Class는 ClassName으로 사용합니다. 

 

3. 최상단 부모 태그

그 외 JSX 에서는 return 부분의 최상단 코드는 반드시 하나의 태그로 감싸져 있어야 합니다. 위의 코드는 App이라는 div로 감싸져 있네요. 그럼 아래처럼 하면 어떻게 될까요?

return (    
    <h1>Hello React</h1>
    <p>지금부터 리엑트 공부 시작!!</p>    
);

그럼 아래와 같은 에러를 볼 수 있습니다. 

"Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>... </>?

 

return (
    <div>
      <h1>Hello React</h1>
      <p>지금부터 리엑트 공부 시작!!</p>
    </div>
);

React는 Virtual Dom에서 컴포넌트 변화르 감지해 낼 때 효과적으로 비교하기 위해 하나의 Dom 트리로 구성되어야 하는 규칙이 있습니다. 그래서 최상단 부모 태그는 감싸줘야 합니다. 하지만 부모 태그를 감싸기 위해 의미 없는 태그를 사용하는게 마음에 들지 않을 수도 있습니다. 

 

이런 상황에서 Fragment를 사용하면 해결됩니다.

return (
    <React.Fragment>
      <h1>Hello React</h1>
      <p>지금부터 리엑트 공부 시작!!</p>
    </React.Fragment>
);

그러면 실제 DOM에서는 h1태그와 p태그만을 반환합니다. 또 Fragment는 아래와 같이 축약형으로 사용할 수 있습니다.

return (
    <>
      <h1>Hello React</h1>
      <p>지금부터 리엑트 공부 시작!!</p>
    </>
);

 

4.  self-closing 태그 (싱글태그)

JSX 내에서는 self-closing 태그도 전부 닫혀 있어야 합니다. 예로 <input>, <br> 등이 대표적입니다.

return (
    <>
      <h1>Hello React</h1>
      <p>지금부터 리엑트<br /> 공부 시작!!</p>
    </>
);

 

5. JSX에서 자바스크립트 값 사용하기

JSX 내부에서 자바스크립트 값을 사용할 땐 {} 태그를 이용하여 값을 반환합니다.

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div>
        hello {name}!
      </div>
    );
  }
}

 

6. 조건문

JSX 내부에서는 조건문을 사용할 때 if 문을 사용 할 수는 없습니다. if문을 사용하려면 JSX 밖에서 if문을 사용하여야 하며 JSX 안에서 조건문을 사용하려면 조건부 연산자로 사용(삼항 연산자), 또는 AND연산자를 사용합니다.

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2  ? (<div>맞아요!</div>) : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

 

7. 주석

주석은 우리가 자바스크립트에서 사용하는 단일 주석이나 *표로 사용하는 전체 주석을 사용하면 화면에 그대로 문자열로 랜더링 됩니다. 리액트에서 주석은 {/* */}과 같은 방법으로 사용합니다.

class App extends Component {
  render() {
    return (
      <div>
        {/* 주석은 이렇게 */}
        <h1>리액트</h1>
        // 이 주석은 노출 됩니다.
        /* 이 주석은 노출 됩니다.*/
      </div>
    );
  }
}