[React 입문] 1주차_React 소개

오늘의 학습내용 :  React 소개

 

◆ React.js

React. 사용자 인터페이스를 만들기 위한 JS 라이브러리!

 

주특기 입문주차에 들어서면서 React를 처음 접하게 되었다. React는 메타에서 개발한 오픈소스 자바스크립트 라이브러리로, 요즘에는 프론트엔드 개발자들 사이에서 많은 인기를 얻고 있다. SPA를 전제로 하고, 업데이트가 필요한 DOM요소를 찾아 해당 부분을 빠르게 업데이트하기 때문에 동적인 웹에서 좋은 퍼포먼스를 낼 수 있다. React 그 자체만으로는 프레임워크라고 불리기에 부족한 기능들이 있지만, 대신 라이브러리라는 특성을 살려 다른 프레임워크에 붙여 사용하거나 각종 메소드를 지원받고 프론트엔드 개발자라면 익혀야 할 표준으로 자리잡았다. 웹개발자로 일하고 싶으면 리액트 배워  홈페이지에서 간단한 특징 소개를 읽어보았다.

• 애플리케이션의 각 상태에 대한 간단한 뷰를 설계하면, 변경되는 데이터에 따라 적절한 컴포넌트를 렌더링해준다. 상호작용이 많은 UI 제작에 도움을 준다.
• 컴포넌트 로직은 템플릿이 아닌 JS로 작성된다. 다양한 형식의 데이터를 쉽게 전달하고, DOM과 별개로 관리할 수 있다. 

: 프레임워크, 라이브러리?

프레임워크는 Vue.js, Angular.js 등 개발자가 기능 구현을 위한 프로그래밍적 재원을 지원받을 수 있는 기술의 조합체이다. 라이브러리는 공통 기능을 모듈화시킨 프로그램의 집합으로, 생산성이 상당히 높다.

 

// 예시 살펴보기
function App ({ name }) {
  return (
    <h1>Hello, {name}!</h1>
  );
}

 

({ name }) 은 자바스크립트에서 사용할 수 있는 구조분해할당(destructuring) 문법을 사용했다. App이라는 함수의 첫번째 인자의 name이라는 속성을 name이라는 변수에 할당한 것이다. return 뒤에는 그동안 많이 작성해봤던 HTML 문서의 태그처럼 생긴 요소들이 있는데, 이는 JSX로 Virtual DOM(React Element)을 생성하는 부분이다. 

 

◆ SPA

SPA(Single Page Application)이라는 이름에서 알 수 있듯이, '단일 페이지 어플리케이션'을 의미한다. 서버에서 필요한 데이터만 비동기로 받아 오고, 동적으로 전체 페이지를 하나의 페이지에 담아 렌더링하는 방식이다. 다수의 페이지를 표시할 때에도 마치 하나의 페이지인 것처럼 처리하기 때문에 부드러운 페이지 전환이 가능하고 사용자의 몰입도를 높여주기도 한다. 때문에 SPA는 최근의 웹 애플리케이션에서 주요한 트렌드로 부각되고 있다. 다시 정리하자면, 서버에서 HTML을 생성해주고 브라우저가 이를 출력하는 것이 아니라, 서버가 하던 대부분의 화면 구성 작업들(HTML 생성, 내비게이션 처리, 사용자 인증, 검색 등)을 JS로 처리해 준다.

 

이렇게까지 설명을 들어도 SPA로 작성된 서비스에 대해 좀처럼 감을 잡지 못했는데, 대표적으로 나무위키와 같은 위키 사이트가 있다는 말을 듣고 어느 정도 이해할 수 있었다! 사용자가 위키에 처음으로 접속하면 방대한 양의 JavaScript를 내려받게 되고, 이후에는 필요한 웹페이지를 JS가 동적으로 생성해 주며 위키 서버는 최소한의 정보만 반환하면 된다. 오늘부터 공부하고 있는 React도 대표적인 SPA 개발 라이브러리이다.