1. 리액트란?
리액트는 페이스북에서 개발한 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.
2. 왜 리액트인가?
1. 라이브러리와 프레임워크 사이 어딘가
리액트 공식 페이지에서는 리액트를 라이브러리라고 하지만 많은 사람들은 리액트를 프레임워크로 이야기합니다.
라이브러리와 프레임워크의 구체적인 차이는 다음에 이야기해보겠습니다만, 리액트는 virtual DOM과 lifecycle 관리 등 전체적인 flow를 주도하기 때문에 프레임워크로 볼 수 있습니다.
하지만 이러한 기능들이 모듈화되어 있어 다른 프레임워크 내에서 사용 가능하다는 점에서는 라이브러리로도 볼 수 있습니다.
이는 flow의 범위를 어디까지로 하느냐의 차이로, 중요한 것은 리액트가 virtual DOM과 lifecycle 관리 등 강력한 흐름 제어 기능을 가지고 있으면서도 다른 프레임워크와 연결하여 사용 가능하다는 점입니다.
2. SPA와 virtual DOM
리액트는 SPA(Single Page Application)에 특화되어 있습니다.
SPA는 하나의 페이지가 동적으로 화면이 바뀌며 기능을 수행하는 것으로 서버에서 페이지를 다시 요청할 필요 없이 화면을 바꿀 수 있습니다.
웹 앱이라고 하면 대부분 이를 의미합니다.
웹 앱은 동작할 때 화면 전체가 바뀌기도 하지만, 화면의 일부만 바뀔 때도 있습니다. 이 때 화면 전체를 다시 구성한다면, 응답 속도나 자원 사용 등이 불리할 것입니다.
리액트는 virtual DOM을 사용해 화면의 일부만 바뀔 때 전체를 다시 구성하지 않고 변경된 부분만 다시 구성합니다. 이를 통해 빠른 응답속도와 효율적인 자원 사용을 보여줍니다.
3. JavaScript, TypeScript
리액트는 앞선 설명에도 나와있듯이 JavaScript 라이브러리입니다.
JavaScript는 1995년에 발표된 언어로 현재는 사실상 웹 표준으로 통용되고 있습니다. 오랜 역사와 수많은 사용자 덕분에 방대한 라이브러리와 자료가 존재합니다.
하지만 JavaScript에도 한가지 단점이 있습니다.
쉽고 빠르게 배울 수 있는 언어를 지향하면서 타입 선언 기능을 없앤 것입니다.
이는 프로그래밍을 처음 접하는 사람에게는 편리한 부분이지만 컴파일 에러로 잡힐 수 있는 부분이 런타임 에러가 되는 치명적인 단점과 IDE와 자동완성을 적극적으로 사용하는 개발자의 생산성을 떨어뜨린다는 단점을 가지고 있습니다.
이러한 단점을 해결하는 것이 바로 TypeScript입니다.
TypeScript는 마이크로소프트에서 개발한 언어로 JavaScript에 타입 선언 기능이 추가된 언어입니다.
인터프리터를 사용하는 JavaScript와 달리, TypeScript는 컴파일을 사용합니다. 정확히는 컴파일을 통해 JavaScript로 변환됩니다.
리액트는 JavaScript와 TypeScript를 모두 지원합니다. 여건과 취향에 따라 선택하여 사용할 수 있으며, 일부 코드에서만 TypeScript를 사용하는 것도 가능합니다.
4. JSX(JavaScript XML)
리액트에서는 JSX를 사용해 화면을 구성합니다.
JavaScript와 XML을 결합한 것으로 모든 JavaScript 표현식을 사용 가능하면서 HTML와 같이 태그를 사용하여 화면을 구성합니다. 정확히는 HTML이 아닌 XML이지만, HTML의 태그가 모두 구현되어 있으므로 개발자의 입장에서는 HTML에서와 동일하게 화면을 구성할 수 있습니다.
또한 JSX로 작성한 컴포넌트를 태그를 이용하여 간단하게 불러와 사용할 수 있습니다.
결론
리액트는 프레임워크급으로 흐름 제어를 하면서도 타 프레임워크와 함께 사용할 수 있고, 웹 앱을 만드는데 특화되었으며, 범용적이고 편리한 언어와 생산성을 가진 언어를 선택하여 사용할 수 있습니다.
현재까지는 일반적인 프론트엔드 웹 앱을 개발하는데 있어 최고의 선택지 중 하나로 볼 수 있습니다.
심지어 모바일 앱을 개발하는데 있어서도 특정 상황에서 충분히 좋은 선택지가 될 수 있습니다.
