리액트를 다루는 기술

by

기본적인 HTML, js 는 안다고 치고, 기본적인 HTML 및 js 외의 타입스크립트 or 리액트가 갖고있는 문법적 특성만 내 지식 기준으로 정리.

감싸인 요소

컴포넌트에 요소(HTML 태그)가 여러개가 있는 경우라면, 반드시 최상위 노드 1개만 존재해야 함.

import React from 'react';

function App() {
  const name = 'REACT~!';
  return (
    <h1> Hello {name} </h1>
    <h2> world </h2>
  );
}

컴파일되지 않는다.

이유

  • 리액트는 기본적으로 Virtual DOM으로 동작한다.
  • 리액트는 컴포넌트의 변화를 감지하기 위해, 성능이슈로 인해 컴포넌트 내부는 반드시 ‘하나의 DOM트리’ 구조로 이루어져야 하기 때문
    • 상기 샘플코드는 하나의 컴포넌트에 루트가 2개인 2개의 별도의 트리로 존재하기 때문에….

그럼 어떻게 해야 하느냐…

리액트 16버전부터 도입된 Fragment를 포함하면 된다.

하지만 키보드 치는게 귀찮으면

import React from 'react';

function App() {
  const name = 'REACT~!';
  return (
    <>
      <h1> Hello {name} </h1>
      <h2> world </h2>
    </>
  );
}

요렇게 멍텅구리 노드로 감싸서 ‘루트가 1개인’ 트리 구조의 DOM으로 리턴시켜주면 된다.

Const & let

ES6부터 추가된 요소임. 그 전엔 그냥 닥치고 var를 이용하였음.(심지어 var를 붙이지 않으면 전역변수로 선언됨. 극혐.)

변수를 규정짓는 가장 대표적인 두가지 요소에는 ‘수명’과 ‘범위’가 있는데,

  • var : 함수 단위의 범위로 동작하는 변수선언 예약어
  • let : 블럭 단위의 범위로 동작하는 변수선언 예약어
  • const : 블럭 단위의 범위로 동작하는 ‘상수’선언 예약어

경험적으로 var보다는 let이 훨씬 유용하고 기준이 빡빡하니, js 엔진이 ES6 이하가 아닌 한 let 예약어만 사용하자.

컴포넌트

리액트의 알파이자 오메가. 자바에서 ‘클래스’ 같은 느낌.

어플리케이션을 이루고 있는 가장 대표적인 요소이다. 뭐, 화면 내 상품상세 메인화면도 컴포넌트라 할 수 있고, 그 안에 들어가있는 가격 영역도 컴포넌트라 할 수 있고……

  • 리액트의 모든 화면 구성요소는 컴포넌트로 이루어져 있다

로 이해를 하면 되겠다.

Leave a Comment