리액트를 다루는 기술 2장

riverkim·2022년 5월 30일

이 글은 책 리액트를 다루는 기술을 개인적으로 정리한 글 입니다.

JSX

코드 이해하기

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 구문은 특정 파일을 불러오는 것

알아 둘 점
모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능 -> Node.js에서 지원하는 기능

브라우저에서도 사용하기 위해 번들러(bundler)를 사용

리액트 프로젝트에서는 주로 웹팩을 사용
import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성
최적화 과정에서 여러 개의 파일로 분리될 수도 있음

JSX란?

JSX는 자바스크립트의 확장 문법(XML과 매우 비슷)

브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

JSX

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

javascript

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

JSX의 장점

보기 쉽고 익숙하다
높은 활용도
- HTML 사용 가능

JSX 문법

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함

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

자바스크립트 표현식, JSX 내부에서 코드를 { }로 표현

import React from 'react';
 
function App() {
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}
 
export default App;

If 문 대신 조건부 연산자(삼항연산자)

import React from ‘react‘;


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



export default App;

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

// 기본
import React from 'react';
 
function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;
}
 
export default App;


//개선
import React from ‘react‘;


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 출력

undefined를 렌더링하지 않기

import React from ‘react‘;
import ‘./App.css‘;


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



export default App;

오류 발생

App(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

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

인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 함

예를들어 background-color는, - 문자를 없애고 카멜 표기법(camelCase)으로 작성 (background-color -> backgroundColor로)

style 객체를 미리 선언하고 div의 style 값으로 지정하는 방법

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 값을 지정하는 방법

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;

class 대신 className

JSX에서는 class가 아닌 className으로 설정

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}
 
export default App;

꼭 닫아야 하는 태그

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;

주석

import React from ‘react‘;
import ‘./App.css‘;


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



export default App;