[React] 리액트에서 컴포넌트(component)란? (+JSX)

[React] 리액트에서 컴포넌트(component)란?

 

리액트는 유저 인터페이스 설계를 위한 자바스크립트 라이브러리이다.

리액트를 한 마디로 정의하긴 했지만, 사실 리액트는 그렇게 간단하게 정의내리긴 어렵다.

리액트를 한 줄로 설명할 수 없다면, 리액트를 직접 사용해 보는 것이 무엇인지 정의내리는 것보다 더 의미있을 것이다.

 

 

리액트를 사용하면

우리는 컴포넌트를 만들고, 컴포넌트를 보기 좋게 바꾸며, 이 컴포넌트가 데이터를 보여주게 된다.

즉, 리액트에서는 모든 게 컴포넌트이다.

 

컴포넌트란? (component)

컴포넌트는 html를 반환하는 함수이며, 재사용하기 편한 UI 조각이다.

 

컴포넌트의 기본 형식은 아래와 같다.

<App />
  또는
<Hello />

컴포넌트는 항상 대문자로 시작해야 하고,

위와 같은 태그 형식을 Self Closing 태그라고 부른다.

 

리액트 컴포넌트를 만들 땐 상단에

import React from 'react';

를 적어주어 리액트에게 여기에 jsx가 있는 컴포넌트가 있다는 사실을 알려주어야 한다.

 

컴포넌트는 재사용이 가능하여 시간과 노력을 절감할 수 있으며,

새로운 기능을 추가하는 것이 간단하여 확장성이 보장된다.

유지보수 비용 또한 최소화할 수 있다.

 

리액트 컴포넌트의 작성 방법은 두 가지가 있다.

첫 번째 방법은 클래스 형태로 작성하는 방법(React Hooks)이고,

두 번째 방법은 함수 형태로 작성하는 방법이다.

 

함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다.

하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다.

리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.

 

 

JSX란?

리액트에서는 JSX라는 언어를 사용해서 코드를 짠다.

 

JSX는 JavaScript + XML의 합성어로, JavaScript를 확장한 문법이다.

JSX는 HTML과 비슷하게 생겼지만 HTML도 아니고 XML도 아니다.

 

리액트에서는 JSX 문법으로 코드를 짜며,

리액트 컴포넌트에서는 XML 형식의 값을 반환해주고 이를 JSX라고 부른다.

그리고 리액트 컴포넌트 파일에서 XML 형태로 작성한 코드는

브라우저에서 실행되기 전 babel이 JSX를 자바스크립트 문법으로 변환되어 실행해준다.

 

JSX는 리액트에서만 사용하는 문법으로써,

React가 아닌 Vue, Angular, Polymer 등을 사용한다면 JSX를 배우지 않아도 된다.