리액트를 다루는 기술 요약#1

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다.

 

목차

1장 리액트 시작

2장 JSX

 

 

1장 리액트 시작

1.1 왜 리액트인가?

<div id="post-1">
  <div class="title">Hello</div>
  <div class="contents">Hello World</div>
  <div class="author">velopert</div>
  <div class="likes">1</div>
</div>

만약 위의 코드에서 likes 값을 2로 업데이트한다면 post-1에서 likes 요소를 찾아 수정해야합니다. 하지만 애플리케이션의 규모가 커지면 커질 수록 찾아서 수정하는 과정이 상당히 복잡해지고 성능도 떨어집니다.

 

페이스북 개발 팀은 이를 해결하려고 하나의 아이디어를 고안해 냈는데, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식입니다.

 

페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 바로 리액트(React)입니다.

 

리액트는 오직 V(View)만 신경 쓰는 라이브러리이고 뷰를 업데이트할 때는 "업데이트 과정을 거친다"라고 하기보다는 "조화 과정을 거친다"라고 하는 것이 더 정확한 표현입니다. 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아끼우기 때문입니다.

 

 

1.2 리액트의 특징

DOM(Document Object Model)이란 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. DOM 자체는 빠릅니다. 단, 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트합니다. 이 과정에서 시간이 허비되는 것입니다.

 

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟습니다.

 

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.

하지만, Virtual DOM을 사용한다고 해서 무조건 빠른 것은 아닙니다. 리액트 매뉴얼에는 다음 문장이 있습니다.

 

우리는 다음 문제를 해결하려고 리액트를 만들었습니다.

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

 

리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는(예: 단순 라우팅 정도만 있는 정적인 페이지) 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다.

 

 

2장 JSX

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

 

 

JSX 문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다. 왜냐하면 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

import React, { Fragment } from 'react';

const index = () => {
  return (
    <Fragment>
      <h1>Hello React</h1>
      <h2>Component</h2>
    </Fragment>
  );
};

export default index;

import React from 'react';

const index = () => {
  return (
    <>
      <h1>Hello React</h1>
      <h2>Component</h2>
    </>
  );
};

export default index;

 

 

2. 자바스크립트 표현

자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 됩니다.

import React from 'react';

const index = () => {
  const name = 'React';
  return (
    <>
      <h1>Hello {name}</h1>
      <h2>Component</h2>
    </>
  );
};

export default index;

 

 

3. If 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없습니다. 하지만 JSX 밖에서 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 됩니다. 조건부 연산자의 또 다른 이름은 삼항 연산자입니다.

import React from 'react';

const index = () => {
  const name = 'React';
  return (
    <div>
      {name === 'React' ? <h1>리액트입니다.</h1> : <h1>리액트가 아닙니다.</h1>}
    </div>
  );
};

export default index;

 

 

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

특정 조건을 만족할 때는 내용을 보여주고, 그렇지 않을 때는 아무것도 렌더링 하지 않고 싶을 때는 어떻게 할까요?

다음과 같이 조건부 연산자를 사용해도 되지만

import React from 'react';

const index = () => {
  const name = 'React';
  return (
    <div>
      {name === 'React' ? <h1>리액트입니다.</h1> : null}
    </div>
  );
};

export default index;

 

아래와 같이 && 연산자를 사용하면 더 짧은 코드로 작성할 수 있습니다.

import React from 'react';

const index = () => {
  const name = 'React';
  return (
    <div>
      {name === 'React' && <h1>리액트입니다.</h1>}
    </div>
  );
};

export default index;

하지만, falsy한 값인 0은 예외적으로 화면에 나타난다는 것을 주의하세요.

 

 

5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하면 오류가 발생합니다. 따라서, 어떤 값이 undefined일 수도 있다면, OR( | | ) 연산자를 사용하여 해당 값이 undefined일 때 사용할 값을 지정하여 오류를 방지해야합니다.

import React from 'react';

const index = () => {
  const name = undefined;
  return name || '값이 undefined입니다.'
};

export default index;

 

반면 다음과 같이 JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

import React from 'react';

const index = () => {
  const name = undefined;
  return <div>{name}</div>;
};

export default index;

 

 

6. 인라인 스타일링

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

import React from 'react';

const index = () => {
  const name = 'React';
  return (
    <div
      style={{
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: '32px',
        padding: 16, // 단위를 생략하면 px로 지정
      }}
    >
      {name}
    </div>
  )
};

export default index;

 

7. class 대신 className

 

 

8. 꼭 닫아야 하는 태그

HTLM코드를 작성할 때는 <input></input이라 입력하지 않고 <input>이라고만 입력해도 작동합니다. 하지만 JSX에서는 태그를 닫지 않으면 오류가 발생합니다.

 

 

9. 주석

JSX내부에서 주석을 작성할 때는 {/* ... /*}와 같은 형식으로 작성합니다. 그리고 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // 와 같은 형태의 주석도 작성할 수 있습니다. 하지만 그 외에는 주석으로 작동하지 않습니다.