프론트엔드 프레임워크 - 리액트

리액트

리액트(React)는 오늘날 가장 인기 있는 프론트엔드 프레임워크 중 하나로, 타입 안정성과 관련해선 탁월한 선택이라 할 수 있습니다. 

 

리액트 응용 프로그램의 기본 빌딩 블록인 리액트 컴포넌트는 TypeScript로 정의되고 소비되므로 안전합니다.

 

이는 다른 프론트엔드 프레임워크에선 찾아보기 힘든 특징으로, 컴포넌트 정의와 소비자 모두 타입을 검사함을 의미합니다.

 

덕분에 타입을 이용하여 "이 컴포넌트는 사용자 ID와 색을 인수로 받는다" 또는 "이 컴포넌트는 리스트 항목만을 자식으로 가질 수 있다"라고 표현할 수 있습니다.

 

타입으로 표현한 이러한 제한을 TypeScript가 강제하며 사용자의 컴포넌트가 이에 부합하는지 확인하는 것입니다.

 

그중에서도 컴포넌트 정의와 소비자에 제공하는 안전성은 독보적이라 할 수 있습니다.

 

TypeScript와 React로 뷰의 타입을 지정한다면 프론트엔드 개발팀의 생산성은 즉각 두 배로 증가할 것입니다. (그래서 제가 공부하고 있습니다... 핳)

JSX 입문

리액트에선 JavaScript XML(JavaScript XML, JSX)이라는 특별한 DSL을 이용해 뷰를 정의하고 JavaScript 코드에 바로 삽입할 수 있습니다.

 

그러면 마치 JavaScript 코드 안에 삽입된 HTML 코드처럼 보일 것입니다.

 

그리고 이 JavaScript를 JSX 컴파일러로 컴파일하면 신기한 JSX 문법을 일반적인 JavaScript 함수 호출로 변환해 줍니다.

 

이 과정은 대략 다음과 같습니다.

 

쇼핑몰 메뉴 앱을 만드는데 아래의 JSX로 쇼핑몰 메뉴바 목록을 보여준다고 해봅시다.

<ul class='list'>
    <li>Casual Shirts</li>
    <li>Coats</li>
    <li>Jeans</li>
</ul>

바벨(Babel)의 transform-react-jsx 플러그인 같은 JSX 컴파일로 코드를 실행하면 아래와 같은 결과를 얻습니다.

React.createElement(
    'ul',
    {'class':'list'},
    React.createElement(
        'li',
        null,
        'Casual Shirts'
    ),
    React.createElement(
        'li',
        null,
        'Coats'
    ),
    React.createElement(
        'li',
        null,
        'Jeans'
    )
    
)

JSX를 이용하면 일반 HTML처럼 보이는 코드를 구현할 수 있고, 이렇게 구현한 코드는 자동으로 JavaScript 엔진에서 실행할 수 있는 타입으로 컴파일된다는 것이 장점입니다.

 

리액트를 이용할 때 꼭 JSX가 필요한 것은 아니며, 반대로 리액트 없이도 JSX를 사용할 수 있습니다.

 

하지만 JSX와 리액트를 조합하면 정말 안전한 뷰를 만들 수 있습니다.