목차
리액트 라이브러리
리액트는 웹 또는 모바일 사용자 인터페이스(UI)를 구축하는 라이브러리다. 종종 리액트를 프론트엔드 프레임워크라고도 부르지만, 실제로는 라이브러리에 더 가깝다. 리엑트는 사용자 인터페이스 구축에 집중하며, 라우팅이나 인증 등은 별도의 라이브러리로 보완해야 하기 때문이다. 리액트는 라이브러리의 기능만 제공하기 때문에 필요한 기능만 선택적으로 도입할 수 있어 유연성이 높다. 반면, 여러 옵션 중 필요한 것을 직접 선택해야 하기 때문에 초보자에게는 오히려 혼란을 줄 수 있기도 하다.
간단한 웹사이트는 자바스크립트만으로 충분히 구현할 수 있지만 웹 애플리케이션이 복잡해질수록 기존 자바스크립트만으로는 유지보수와 확장성이 점점 어려워진다. 규모가 커지고 웹 애플리케이션에서 프론트엔드에서 처리해야 할 복잡한 로직과 반복되는 기능이 많아질 때 이런 복잡함을 쉽게 관리하고, 프론트엔드 개발 생산성을 높여주는 것이 리엑트 같은 라이브러리다.
리액트의 탄생과 발전사
리액트는 Facebook 소프트웨어 엔지니어인 조던 워커(Jordan Walke)가 개발했다. 2011년 Facebook은 Bolt.js라는 프레임워크(MVC, Model-View-Controller)를 개발하던 중, 조던 워커가 아쉬운 부분을 개선하기 위해 사이드 프로젝트인 FaxJS를 만들었다. FaxJS가 FBolt로 발전하다가 React.js라는 이름으로 변경하게 되었다. (리엑트 로고를 자세히 보면 가운데 볼트 모양이 있는 것을 확인할 수 있다.)
Facebook과 Instagram에 적용하면서 React.js가 안정적으로 되자 Facebook은 JSConf US 2013에서 React.js를 오픈소스로 공개하기로 한다. 첫 반응은 부정적이었다. 하지만 지금은 가장 인기 있는 프론트엔드 프레임워크 중 하나가 되었다.
리액트의 특징
리액트의 특징은 다음과 같다.
- 선언적 프로그래밍: 리액트는 사용자 인터페이스의 상태를 선언적으로 기술한다. 즉, 어떻게 그릴지(명령형)가 아니라, 특정 상태에서 무엇을 그려야 할지를 선언한다.
- 컴포넌트 중심 개발: 모든 사용자 인터페이스 요소를 독립적인 컴포넌트 단위로 분리하여 개발한다. 각 컴포넌트는 재사용할 수 있고, 복잡한 UI도 작은 단위로 쪼개어 관리할 수 있다.
- 최소한의 내장 기능: 리액트는 다른 프레임워크에 비해 내장된 기능이 적다. 라우팅, 상태 관리, 인증 등은 별도의 라이브러리를 사용해야 하기 때문에 자유도가 높지만 선택과 조합에 대한 고민이 필요하다.
자바스크립트와 리액트의 차이도 살펴보자. 전통적인 자바스크립트 앱은 DOM을 직접 조작해야 하며, 앱 상태와 동기화가 어렵고 코드가 복잡해지기 쉬운 반면, 리액트 앱은 데이터(상태)가 변경되면 인터페이스가 자동으로 그에 맞게 업데이트된다. 데이터 중심의 선언적 프로그래밍 방식으로 코드의 가독성과 유지보수성이 크게 향상된다.
오늘 하루를 돌아보며
리액트는 복잡한 프론트엔드 앱을 효과적으로 개발할 수 있도록 돕는 자바스크립트 라이브러리다. 사용자 인터페이스를 컴포넌트 단위로 작게 나누어 관리하고, 데이터 변화에 따라 화면이 업데이트되는 선언적 방식으로 설계되었다.
리액트를 제대로 이해하고 활용하기 위해서는 기본 개념(선언적 프로그래밍, 컴포넌트, 상태 등)에 대한 깊은 이해가 필요하다. 이러한 토대를 바탕으로 복잡한 프론트엔드 개발의 효율성과 생상선을 극대화할 수 있을 것이다.
거의 1주일의 방학 기간에 TypeScript를 공부하고 오늘부터 React 공부를 시작했다. 분명 아는 언어로 적는데 내용은 그렇지 않았다. 알 것 같으면서도 모르겠는 묘한 상태로 수업을 들었다. 리액트에 대한 설명을 들을 때는 '일단 그런 게 있구나' 하고 넘어갔는데, 리액트 라이브러리의 표준 API를 학습하기 위해 직접 스크립트를 짜기 시작하니까 좀 멍해졌다.
확실히 JavaScript만으로 마크업을 생성하려면 Web API를 사용해서 명령형 방식으로 하니까 코드도 길어지고 복잡해지는 데다가 가독성도 현저히 떨어지는 것을 발견했다. React는 선언적 API를 사용해서 마크업을 생성하니까 코드도 간결하고, 가독성도 좋았다.
일단 오늘은 둘의 차이를 느낀 것만으로 충분하지 않았을까 싶다. 수업을 계속 들으면 조금 더 잘 이해될 것 같다. 이제 막 한 발을 내디뎠을 뿐이니까! 프론트엔드 개발자가 되기 위한 여정은 아직 진행 중이다. 매일 복습하고, 학습하면 조금 더 빨리 내 것으로 만들 수 있지 않을까 기대해 본다.
