Why use React?
리액트는 현대 프론트엔드 개발에서 핵심적인 역할을 하는 라이브러리입니다. 왜 많은 개발자들이 리액트를 선호하는지에 대해 설명합니다.
프론트엔드 개발자를 희망하는 나를 포함한 여러 학생들이 학원을 통해서나 개인의 학습을 통해 공부를 한다했을때, 공통점을 하나 꼽을 수 있다. 바로 리액트! 현재 프론트엔드에서 리액트는 기본으로 탑재된 교양과도 마찬가지의 수준이다. 물론 리액트를 제외한 수많은 라이브러리, 또는 프레임워크가 있으나 리액트는 그 중심점에 있다고 생각한다. 그럼 왜 리액트일까? 대체 리액트가 무엇이길래?
리액트는 프레임워크일까, 라이브러리일까?
‘사용자 인터페이스를 만들기 위한 JavaScript 라이브러리’ 라고 리액트팀에선 정의하고있다.
넷에서 많은 유저들이 리액트는 프레임워크인가, 라이브러리인가에 대한 주제에 대해 수 많은 의견과 논쟁이 오간적이 있다. 먼저 ‘원하는 기능을 구현하려 할 때 필요한 모든 기능을 제공해주는 것’을 우리는 프레임워크라고 부른다. 반면 라이브러리는 ‘개발자가 필요한 기능들을 그때 그때 호출하여 기능을 구현’한다. 그러면 누군가는 이렇게 말할 수도 있다. “리액트에서는 많은 훅 기능들과 api를 제공한다. 그럼 이건 프레임워크가 아닌가?!” 라고 말이다. 하지만 리액트는 컴포넌트 시스템을 제공하지만 라우팅, 데이터 패치 등과 같은 방법을 제공하지 않을 뿐더러 특정 방법 사용을 규정하지도 않는다.또한 사용자가 필요한 방법을 입맛에 맞게 추가해 구성할 수 있고, 무엇보다 리액트팀에서 ‘리액트는 라이브러리다’ 라고 못박아 놓기도 하였다.
리액트는 무엇인가?
리액트는 Facebook(Meta)에서 개발한 자바스크립트 UI 라이브러리이다. 특히 리액트는 싱글 페이지(SPA) 애플리케이션의 UI를 생성하는데 집중되어있다. 리액트의 특징 중 몇가지를 같이 정리하자면, JSX(JavaScript XML)이라는 간단한 문법을 통하여 단방향 데이터 바인딩을 사용하는 것이 특징이다. 또한 가상 돔(Virtual DOM)이라는 개념을 사용하여 이전 돔과 바뀐 돔을 비교하는 작업을 통해, 웹 애플리케이션의 퍼포먼스를 최적화한다. 단점으로는 싱글 페이지(SPA)에 특화되어있는만큼 리액트는 페이지전환기능을 제공해주지 않는다. 만약 리액트에서 페이지 전환이 필요하다면, ‘React-Router’라는 라이브러리를 사용하여야 한다.
리액트의 컴포넌트와, 그 구성요소는 무엇인가?
컴포넌트는 React의 핵심 개념 중 하나이다. 컴포넌트는 사용자 인터페이스를 구축하는 기본이 되며, React를 시작하는데 필히 알아야 할 개념이기도 하다. 컴포넌트에 대하여 정의하자면, ‘React 컴포넌트는 마크업을 생성하는 JavaScript 함수’라고 할 수 있다. 좀 더 추가적으로 리액트에서 컴포넌트를 사용할 때에는 대문자로 표기해야 리액트에서 컴포넌트로 인식한다는 점이다. (구성요소는 무엇인가? 라는 질문에 대한 정답을 아직 찾지못하였다.)
props, state, 렌더링, JSX에 대한 설명.
리액트에서 컴포넌트를 하나 생성했다면, 해당 컴포넌트에서는 매개변수를 받을 수 있다. 그리고 그 매개변수를 우리는 ‘프롭스(props)’라고 부른다. 보통 함수에서 매개변수에는 string이나 boolean, 함수등의 여러가지를 받을 수 있지만 리액트에서 props는 객체로 정의되어있기에, props라는 객체안에 전달하려는 값이 string이던 함수등이 전달된다.
state는 리액트를 사용하여 제작하는 페이지에서 값이 바뀌어야 한다면 아주 중요하고 필요한 존재이다. 리액트에서 제공하는 useState훅을 이용하여 우리는 state를 관리할 수 있다. state를 사용하여 어떠한 상태값을 저장하기만 할 수도 있고, 필요하다면 그 상태값을 업데이트하면서 제작하는 페이지가 좀 더 다이나믹하게 변하는 것을 경험할 수 있다.
리액트에서 렌더링이란것은 앞서 개발자가 선언한(제작한) 컴포넌트가 props와 state를 통해 UI를 구성하는 작업을 컴포넌트에게 요청하는 작업을 말한다. 리액트 공식홈페이지를 살펴보면 리액트가 코드를 바로 화면에 출력하는 것이 아니라, ‘Trigger - Rendering - Commit’이란 총 3가지의 과정을 거치게된다. 그리고 위에서 설명한 state는 이 과정중 Trigger와 매우 연광성이 깊다. 렌더링에 대해서 이야기하자면 리액트의 생태계부터 뜯어가며 알아보아야 하기때문에 여기까지만 적고 JSX로 넘어가도록 하겠다.
JSX(JavaScript XML)은 HTML이랑 착각하는 사람도 있는데, 정확히는 예전에 XML문법을 추가한 문법이다. 이는 리액트자체에서 제공하는 공식적인 문법은 아니다.
function App() {
return React.createElement("h1", null, "Hello, React!");
}
위의 코드는 기존 리액트에서 제공하는 DOM을 생성하는 방법이다.
function App() {
return <h1>Hello, React!</h1>;
}
그리고 이 코드는 JSX문법이다. JSX문법은 프론트엔드 개발자가 코린이시절부터 배우는 HTML문법과 매우매우매우…(이하 생략) 흡사하기 때문에 모든 개발자가 JSX문법을 사용한다. JSX문법의 특징으로는 첫번째로 부모요소로 감싸는 형태의 DOM트리구조가 형성되어야 한다는 점. 두번째는 ‘JavaScript 표현식’을 사용하여야 한다는 점이다. 마지막으로 JSX문법내부에서 if문과 for문이 사용이 되지 않기에 삼항연산자를 사용하여 조건문을 작성하여야 한다. if문과 for문은 JavaScript 표현식이 아니기 때문에 사용이 불가능하다.
