상세 컨텐츠

본문 제목

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

22-23/22-23 리액트 스타터 1

by 2jo 2022. 9. 29. 10:01

본문

728x90

2.1 코드 이해하기

create-react-app으로 hello-react 프로젝트를 만들고 src/App.js 파일을 VS code에서 엽니다. 

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;

import 구문은 특정 파일을 불러오는 것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용할 수 있습니다. 모듈을 불러와서 사용하는 것은 브라우저에는 없는 기능입니다. 이는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원합니다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용합니다. 번들은 묶는다는 의미입니다. 파일을 묶듯이 연결하는 것입니다. 대표적인 번들러로 웹팩, parcel, browserify 도구들이 있으며 각 도구마다 특성이 다릅니다. 리액트 프로젝트에서는 편의성과 확장성이 뛰어난 웹팩을 사용합니다. 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성합니다. 또 최적화 과정에서 여러 개의 파일로 분리될 수 있습니다. 2017년부터 브라우저에서 import 구문을 사용할 수 있게 됐으나 단순히 다른 경로에 있는 자바스크립트를 불러오는 용도로만 사용되기 때문에 프로젝트 번들링과는 다릅니다.

웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있습니다. 이렇게 파일들을 불러오는 것을 웹팩의 로더(loader)라는 기능이 담당합니다. 로더는 여러 가지 종류가 있습니다. 원래 웹팩의 로더는 직접 설치하고 설정해야 하지만 리액트 프로젝트를 만들 때 사용했던 명령어 때문에 별도의 설정을 할 필요가 없습니다.

 

또, 이 코드는 App이라는 컴포넌트를 만듭니다. 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻합니다. function 키워드를 사용하여 만든 컴포넌트를 함수 컴포넌트라고 부릅니다. 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냅니다. 이런 코드를 JSX라고 부릅니다.

 

 

2.2 JSX란?

JSX는 자바스크립트의 확장 문법입니다. 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. 변환 예시 코드를 살펴봅시다.

function App(){
return (
  <div>
    Hello <b>react<b>
  </div>
);
}
function App(){
return React.createElement(“div”, null, “Hello ”, React. createElement(“b”, null, “react”));
}

위의 코드가 아래의 코드와 같이 변환됩니다. 컴포넌트 렌더링 때마다 매번 React. createElement 함수를 사용해야 한다면 불편할 것입니다. JSX를 사용하면 편하게 UI를 렌더링할 수 있습니다.

 

 

2.3 JSX의 장점

2.3.1 보기 쉽고 익숙하다.

자바스크립트를 사용한다면 요소들을 일일이 만들어야 합니다. 즉, 가독성이 높고 작성하기 쉽기 때문에 JSX를 사용합니다.

 

2.3.2 활용도가 높다.

JSX는 div 같은 HTML 태그를 사용할 수 있으며 컴포넌트 또한 안에서 작성할 수 있습니다.

 

 

2.4 JSX 문법

JSX 문법에는 총 9가지의 규칙이 있습니다.

2.4.1 감싸인 요소

컴포넌트에 여러 요소가 있을 때 반드시 부모 요소 하나로 감싸야 합니다.

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div>
  );
}
export default App;

div 요소를 작성하지 않고 실행한다면 오류가 발생합니다. Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어지도록 하였습니다. div 요소가 아니더라도 Fragment 기능을 사용하면 됩니다. 코드 상단 import 구문에서 react 모듈에 들어 있는 Fragment 컴포넌트를 추가로 불러옵니다. 불러온 뒤 <div></div> 대신 <></>를 사용하면 같은 효과를 냅니다.

 

2.4.2 자바스크립트 표현

JSX안에서는 자바스크립트 표현식을 사용할 수 있습니다. 작성하려면 코드를 괄호({ })로 감싸면 됩니다.

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 (
    <>
      <h1>{name}안녕!</h1>
      <h2>잘 작동하니?</h2>
      {name == '리액트'?(
        <h1>리액트입니다.</h1>
      ):(
        <h2>리액트가 아닙니다.</h2>
      )}
    </>
  );
}
export default App;

 

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

특정 조건을 만족할 때 내용을 보이고, 만족하지 않을 때 아무것도 렌더링하지 않는 상황일 때 조건부 연산자를 통해 구현할 수 있습니다. 그러나 AND 연산자(&&)를 사용하여 더 짧은 코드로 조건부 렌더링을 할 수 있습니다. AND 연산자(&&)로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문입니다.

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

 

2.4.5 undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 됩니다. 어떤 값이 undefined일 수도 있다면 OR 연산자(||)를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있습니다. *JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

// name 값이 undefined일 때 보이고 싶은 문구가 있는 코드 작성 예시
function App() {
  const name = undefined;
  return (
    <>
      {name || '리액트'}
    </>
  );
}
export default App;

 

2.4.6 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어야 합니다. 스타일 이름 또한 – 문자를 없애고 카멜 표기법으로 작성해야 합니다. 예시) background-color -> backgroundColor

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize:'48px',
    fontWeight:'bold',
    padding:16
  }
  return (
    <div style={style}>
      {name}
    </div>
  );
}
export default App;

 

2.4.7 class 대신 className

일반 HTML에서 CSS 클래스를 사용할 땐 class라는 속성을 설정합니다. 그러나 JSX에서는 className으로 설정해야 합니다.

// src/App.js 파일
import './App.css';
function App() {
  const name = '리액트';
  return <div className="react"> {name}</div>;
}
export default App;
// src/App.css파일
.react {
  background: aqua;
  color: black;
  font-size:48px;
  font-weight:bold;
  padding:16
}

 

2.4.8 꼭 닫아야 하는 태그

JSX에서는 HTML과 달리 태그를 닫지 않으면 오류가 발생합니다.

 

2.4.9 주석

자바스크립트 주석 작성 방식과 약간의 차이가 존재합니다. JSX 내부에서 주석은 /* … */와 같은 형식으로 작성합니다. 시작 태그를 여러 줄로 작성할 땐 //… 과 같은 형태의 주석도 작성할 수 있습니다. 그러나 시작 태그 바로 다음에 주석을 작성한다면 페이지에 그대로 나타납니다.

 

 

2.5 ESLint와 Perttier 적용하기

ESLint는 문법 검사 도구이고 Prettier는 코드 스타일 자동 정리 도구입니다.

ESLint는 코드를 작성할 때 실수를 하면 에러 메시지를 VS Code 에디터에서 바로 확인할 수 있게 합니다. 에디터 하단 문제 탭에서 뜨는데, VS Code 상단 메뉴 > 보기 > 문제 탭에서 열 수 있습니다.

JSX를 작성할 때는 코드의 가독성을 위해 들여쓰기를 사용합니다. Prettier를 사용하여 자동 코드 정리 실행 시 코드가 제대로 정렬되고 세미콜론이 빠진 곳에 세미콜론이 추가되며 작은따옴표는 큰 따옴표로 바뀝니다. 이러한 Prettier는 코드 스타일을 사전 설정할 수 있다는 장점이 있습니다. Prettier는 VS Code에서 F1키를 누르고 format이라고 입력한 다음 Enter키를 누르면 사용됩니다. 파일 > 기본 설정 > 설정에서 format on save를 검색해 활성화한다면 저장할 때마다 Prettier를 사용하여 코드를 자동으로 정리하도록 설정할 수 있습니다.

Quiz

1. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 (________)를 사용하여 다른 파일을 불러와 사용할 수 있다.

2. 다른 파일을 불러와 사용할 수 있는 기능을 브라우저에서도 사용하기 위해 (________)를 사용한다.

3. 웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있다. 이렇게 파일들을 불러오는 것을 웹팩의 (________)라는 기능이 담당한다.

4. 컴포넌트에 여러 요소가 있을 때 반드시 (________)로 감싸야 한다.

5. JSX안에서는 자바스크립트 표현식을 사용할 수 있다. 작성하려면 코드를 (________)로 감싸면 된다.

6. 리액트에서 DOM 요소에 스타일을 적용할 때는 (________) 형태로 넣어야 한다.

7. JSX에서 CSS 클래스를 사용할 땐 (________)로 설정한다.

8. JSX를 사용하여 모니터에 corner를 출력하시오. (인라인 스타일 형식으로 작성)(배경색, 글자색, 글자 크기, 글자 굵기, 여백 임의)

9. 8번 코드를 외부 스타일 시트 형식으로 수정하시오.

 

Corner React1

Editor: 동동

728x90

'22-23 > 22-23 리액트 스타터 1' 카테고리의 다른 글

[리액트 스타터1] 4장. 이벤트 핸들링  (0) 2022.10.13
[리액트 스타터 1] 3장. 컴포넌트  (0) 2022.10.06
[리액트 스타터 1] 1장. 리액트 시작  (0) 2022.09.29
[codecademy JavaScript] 9장. Objects  (0) 2022.09.22
[codecademy JavaScript] 8장. lterators  (0) 2022.09.22

관련글 더보기

티스토리툴바