프론트엔드 개발자를 지망하는 사람이라면 누구나 들어봤을 세 개의 이름이 있다. 바로 React, Angular, Vue.js다. 이전 글에도 간략히 말했지만, React는 현재 프론트엔트에서 가장 핫한 라이브러리이다. 리액트의 역사나, 누가 만들었는지, 왜 배워야 하는지 등의 내용은 검색하면 쏟아지는 내용이며, 학습자로서 이미 그 중요성을 알고 있기 때문에 굳이 짚고 넘어가지는 않을 생각이다. 어차피 밑의 사진 한 장이면 'WHY REACT?'라는 질문은 해소되니까.
'WHY REACT?' 대답은 심플하다. 많이 쓰니까.
React의 특징
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. React란 무엇인가요? - React 공식 문서
리액트는, 간단히 설명하자면 UI를 위한 JS 라이브러리이다. 리액트는 컴포넌트 기반의 라이브러리로, 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들며, 이를 조합해 복잡한 UI를 만들어낼 수 있다. 즉, 리액트의 가장 기본은 컴포넌트이다. 리액트를 공부하면서, 공식 문서의 설명이 조금 부족하다고 느꼈었는데 React의 기본, 컴포넌트를 알아보자 - Jisu Park 님의 이 글이 아주 큰 도움이 되었다. 이 분의 비유대로 만일 React를 UI = View(State)라는 하나의 함수로 여긴다면, React의 특징이자 장점들을 아주 쉽게 이해할 수 있게 된다.
- 대부분의 함수가 그러하듯, 단방향 사고가 강제된다.
state,props에 따른 렌더링 결과가 바뀌지 않는다. 즉, 불변성을 지킬 수 있다.- 함수 내용을 정의하듯 JSX(React의 HTML 개념)을 통해 화면을 어떻게 렌더링할지 정의할 수 있다.
- 함수 간 합성이 가능하듯 컴포넌트끼리의 합성이 가능하다.
JSX란 무엇인가?
컴포넌트를 알아보기에 앞서, JSX를 먼저 공부했다. JSX는 간단히 설명하자면, React 전용의 HTML이다.
<div>
<div class="title">제목</div>
<button onclick="alert();">버튼</button>
</div>
// 기존 HTML 방식
<div>
<div className="title">제목</div>
<button onClick="alert();">버튼</button>
</div>
// JSX 방식JSX 코드를 보면 알겠지만, 기존의 HTML과 큰 차이는 없다. camalcase를 사용한다는 것 정도. 물론, 웹브라우저는 HTML, CSS, Javascript만 읽을 수 있기 때문에, 최종적으로 실행될 때는 React가 JSX를 HTML로 Babel을 통해 변환시켜 실행된다.
React의 Component란 무엇인가?
컴포넌트를 간단히 설명하자면 UI 또는 기능을 부품화하여 재사용 가능하게 하는 것과 같다. 나는 이 컴포넌트를 금형으로 이해했다. 큰 틀인 Component가 있다면, 우리는 그 틀 안에서 넣고 싶은 정보인 props를 집어넣는다. 핸드폰 케이스를 예를 들자면, 아이폰 12라는 모델의 금형에 내가 만들고 싶은 디자인을 집어넣어 최종적으로는 여러 종류의 아이폰 12 핸드폰 케이스를 만들 수 있다. 우리는 이것과 비슷한 개념을 잘 알고 있는데, 바로 함수이다. 그렇다, 컴포넌트는 function이다. React의 컴포넌트를 작성에는 두 가지 방법이 있다.
- 클래스형
- 함수형
최근 많은 기업들이 함수형 컴포넌트를 주로 사용한다고 하나, 기존에 만들어진 서비스들은 클래스형으로 되어 있는 경우도 많기 때문에 두 가지 선언 방식 모두 숙지해 둘 필요가 있다.
/// 클래스형 컴포넌트
import { Component } from 'react';
class New extends Component {
render() {
return <div>이것은 클래스형 컴포넌트이다.</div>
}
}
export default New
/// 함수형 컴포넌트
export default function New() {
return <div>이것은 함수형 컴포넌트이다.</div>
}
/// 함수형 컴포넌트는 간단하게 화살표 함수(ES6)로도 정의할 수 있다.
const New = () => <div>이것은 화살표 함수로 선언한 함수형 컴포넌트입니다.</div>
export default New
물론 데이터는 각 컴포넌트에 맞게 변경하여 사용이 가능하다.
React는 왜 HTML을 JS 코드로 가져왔는가?
이 방식의 장점은 간단하다. 로직과 마크 업이 하나의 Component에 담기게 되면, 상세하게 나뉘어진 페이지들을 여러 유닛으로 나누어 관심사 분리를 할 수 있다. 예를 들어, 쇼핑몰 사이트에서 여성의류 Page가 있다면, 그 여성의류 Page 부모 Component 안에서 아우터, 상의, 하의 등의 자식 Component 등으로 props를 전달할 수 있게 된다. 이는 차후 서비스가 방대해질 때 유지보수가 편해지는 이점이 있다.
