리액트(React.js)란?

리액트란? 페이스북에서 제공해주는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리이다.

리액트는 정말 인기있는 프론트엔드 라이브러리다. 리액트를 사용해본 개발자는 너무나 당연하게 매력적이라고 표현할 것이다.

우선 리액트를 배워보기 전에 필수적으로 알아야 할 지식인 SPA(Single Page Applications)에 대해 간단하게 정리 해보자.

SAP(Single Page Applications)

• SPA는 말 그대로 페이지가 하나인 어플리케이션이다. 예전에는 어떠한 페이지를 로딩할때마다 매번 서버에서 리소스(페이지)를 받아와서 렌더링했다. 여기서 문제점은 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라 데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생기게 되었다.

• SPA는 처음 접속 시 서버에서 하나의 페이지를 받아온 후 다른 페이지로 이동할때는 서버에 새로운 페이지를 요청하는 것이 아닌 새 페이지에서 필요한 데이터(JSON 형식)만 받아와 새로운 뷰를 보여준다.

여기까지 SPA에 대해 간단히 정리하고 추후에 자세히 정리해보겠다.

리액트 정의

• 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.
• 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들 수 있다.
• 컴포넌트 로직은 템플릿이 아닌 Javascript로 작성한다.
• DOM과는 별개로 상태를 관리할 수 있다.

리액트의 특징

• 컴포넌트
  리액트는 컴포넌트 기반의 라이브러리이다. UI를 하나의 큰 덩어리라면 컴포넌트는 그 덩어리를 이루는 작은 요소들이라고 할 수 있다. 예를 들어 큰덩어리가 집이라면 그 집이 이뤄지기 위한 기둥, 벽, 창문 등이 작은 요소라고 생각하면 된다. 이렇게 작은 요소들로 쪼개져 있기 때문에 전체적으로 코드를 파악하기가 쉽다. 또한 작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있기 때문에 효율적이다.

• One Wat Data flow
  데이터의 흐름이 한 방향으로 흐른다. 데이터를 부모 컴포넌트에서 자식 컴포넌트에게 전달할 수 있는 반면 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 없다. 물론 이러한 문제점을 해결할 수 있는 방법은 여러가지 있으며 대표적으로 부모 state의 활용, 리덕스를 사용하는 방법이 있다.

• Props / State
  Props란? 부모 컴포넌트에서 자식 컴포넌트로 전달해 준 데이터이다. Props는 읽기 전용 데이터라 전달 받은 Props를 자식 컴포넌트에서는 변경이 불가능하다.
  State란? 각각의 컴포넌트에서 관리하는 자신의 데이터라고 생각하면 된다. State는 뷰를 동적으로 변경할 수 있는 가장 기초적인 요소다. 다른 컴포넌트에서의 직접적인 접근(변경)이 불가능하다. 하지만 State를 변경할 수 있도록 함수를 전달 받으면 변경이 가능하다.

• Virtual DOM(가상돔)
  Virtual DOM은 말 그대로 가상의 돔을 말한다. SPA가 아닌 방식의 프론트 개발에서 html 파일을 열게되면 html코드들이 DOM을 만든다. 그리고 html 코드의 한 부분이 변경이 된다면 DOM 전체를 새롭게 만들게 되어 비효율적이다. 리액트의 가상돔은 이러한 문제점을 보안할 수 있는데 리액트는 어떠한 변경이 일어나면 가상돔을 만들어 DOM과 비교하여 변경 사항이 있을 경우 전체를 새롭게 만드는 것이 아닌 변경된 부분만 반영하여 훨씬 효율적이며 빠르다.

리액트의 장점

• 엄청난 생태계를 자랑한다. 리액트 라이브러리가 정말 많고 지금 현재까지도 계속 많아지고 있다. 뿐만 아니라 단순히 특정 기능을 구현하기 위한 라이브러리(폼, 애니메이션, UI 등)이 아니라 프로젝트 구조와 강하게 묶여있는 라우터, 상태 관리 라이브러리 등 매우 다양하다.

• 사용되는 곳이 많다. 한마디로 수요가 많다. Airbnb, BBC, Cloudflare, Codecademy, Coursera, Dailymotion, eBay, Twitch, Walmart, Yahoo 등 정말 많은 곳에서 사용되고 있다. 통계적으로 증명이 되어 있을 정도로 매력이 있는 라이브러리다.

리액트는 사용하면 할수록 정말 서드파티 라이브러리가 많아 나를 괴롭히는 경우가 많지만 한번 빠지게 된다면 그 전으로 돌아가기는 쉽지 않을 것이다.