[React 스터디 - 1] React 란?

00  리액트의 탄생 이유?

JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 DOM의 변경이 필요하다. 브라우저의 DOM Selector API를 사용해 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야 하는데, 이를 위해서 DOM 노드를 직접 조작해야 한다. 이런 동작이 크게 발생하지 않는 웹사이트라면 상관 없겠지만, 현대의 웹페이지처럼 다양한 동작이 발생하는 경우에는 코드의 유지보수 및 관리가 어려워진다.

 

이를 해결하기 위해 프레임워크를 활용해 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결해 업데이트 작업을 간소화하는 방식을 사용했다.

 

리액트의 경우 위와 다르게 데이터가 바뀔 때 DOM을 어떻게 업데이트 할 지 고민하는 것이 아니라 이전 뷰를 날리고 결과적으로 보여줘야 하는 뷰를 다시 보여주자는 발상으로 만들어졌다. 즉, 업데이트를 어떻게 해야 할 지에 대한 고민을 할 필요가 없어지는 것이다. 여기에 가상 돔(Virtual DOM)과 컴포넌트 구조를 활용해 보다 빠른 업데이트와 렌더링을 가능하게 해주는 것이 리액트이다.

01  라이브러리 vs 프레임워크

개발을 하다 보면 정형화되고 반복되는 작업들이 필연적으로 존재하고 이를 유지보수해야 함에 따라 재사용 가능한 코드, 즉 일종의 형식을 만들 필요가 생겼다. 또한, 구현해야 하는 기능이 많아지면 코드가 복잡해지고, 하나의 파일 안에 넣기도 힘들어지기 때문에 코드 가독성도 떨어지고 어떤 코드가 무엇을 제어하고 있는지 파악하기 어려워진다. 이러한 이유로, 프로그래밍 언어별로 개발을 용이하고 효율적으로 할 수 있게끔 도와주기 위해 만들어진 것이 라이브러리와 프레임워크이다.

프레임워크  Framework

프레임워크를 간단히 표현하자면 웹 애플리케이션을 만들기 위한 뼈대, 틀이라고 할 수 있다. 프레임워크는 개발 시 필수적인 코드와 알고리즘 같은 기능을 제공하는데 이 룰을 지켜서 만들어야 한다. 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공한다.

프레임워크는 프레임워크만으로 프로그램이 동작하는 것이 아니라 뼈대를 제공하고 그 위에 개발자가 코드를 올려 동작하게끔 하는 구조로 되어 있어 개발자들이 로직에 좀 더 집중할 수 있으며, 객체 지향 개발에 있어 시스템을 일관적으로 관리할 수 있게 도와준다.

프레임워크가 제공하는 가이드에 맞춰 설계하고 개발하기 때문에 시스템의 통합, 일관성을 유지할 수 있다. (=제어 권한이 개발자가 아닌 프레임워크에 있음)

 

대표적인 자바스크립트 프레임워크로는 AngularJS, Vue.js 등이 있다.

 

그리고 이 글에서 다루는 React는 자바스크립트 라이브러리에 속한다.

라이브러리  Library

라이브러리(Library)는 사용자 인터페이스를 만들기 위한 기능 모음집이라고 할 수 있다. 도서관처럼 필요할 때마다 꺼낼 수 있는 책, 즉 필요한 기능들이 모여있는 코드의 묶음이 프로그래밍에서의 라이브러리라고 보면 된다.

특성상 개발자가 직접 필요한 기능을 구현 또는 구축할 수 있다. 자주 사용되는 기능들을 라이브러리(객체나 함수등의 형태)로 만들어두면, 필요할 때마다 직접 호출하여 사용할 수 있으며, 다른 사람들이 만든 외부 라이브러리도 가져다 사용할 수 있다.

 

프레임워크와 라이브러리의 차이점

 

프레임워크는 프로그램의 흐름에 대한 제어권한을 개발자가 아닌 프레임워크가 갖고 있으나, 라이브러리는 개발자가 필요한 부분만 가져다 사용할 수 있기 때문에(=제어 권한이 개발자에게 있음) 라이브러리를 활용하면 각자 환경에 맞거나 마음에 드는 라이브러리를 선택하여 시스템을 구축할 수 있다.

 

프레임워크와 라이브러리의 특징과 차이를 비교하면 다음 표와 같다.

 

02  React의 특징

리액트는 다음과 같은 특징들을 가지고 있다.

 

1. 빠른 업데이트&렌더링 속도

웹페이지와 실제 DOM 사이의 중간 매개체 역할을 하는 가상 돔(Virtual DOM)을 활용해 업데이트해야 할 최소한의 부분만 검색하고 업데이트 및 렌더링하기 때문에 작동 성능과 속도 및 높은 사용자 경험을 보장해준다.

 

2. 컴포넌트 (component) 기반의 구조

리액트에서 컴포넌트(component)란 , 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수로, 뷰를 독립적으로 구성해 재사용을 할 수 있게 하여 새로운 컴포넌트를 쉽게 만들 수 있게 해 주는 리액트에서 매우 중요한 개념이다. 여러 컴포넌트들이 모여 전체 페이지를 구성하고, 전체 페이지 또한 하나의 컴포넌트라 할 수 있다(=레고 블록 조립하듯 개발하는 구조).

 

3. 재사용성 Reusability

재사용성(reusability)이란, 객체 지향 프로그래밍에서 쓰이는 개념으로 계속해서 다시 사용이 가능한 성질을 의미한다. 다른 곳에서도 곧바로 쉽게 사용할 수 있으면서, 호환성 문제 생기지 않도록 개발하기 때문에 기존에 만들었던 것을 재사용하여 개발 기간이 단축되고, 문제 생긴 부분만 수정하면 되기 때문에 유지 보수가 용이해진다.

 

단점으로는 기존과 다른 방식의 UI 라이브러리이기 때문에 새로운 개념들이 많이 등장하고, 업데이트로 인해 변경되는 부분에 대한 꾸준한 학습이 필요하다는 것과 높은 상태관리 복잡도로 인해 redux 등 외부 상태관리 라이브러리 학습이 필요하다는 점이 있다.

03  개발환경 설정

Node.js 설치

Node.js 는 구글 크롬의 자바스크립트 엔진 (V8 Engine) 에 기반해 만들어진 자바스크립트 런타임으로, 자바스크립트로 네트워크 애플리케이션을 만들 수 있게 해주는 환경이다.

 

https://nodejs.org/ko/  에서 OS에 맞는 파일을 받아 설치하면 된다.

Node.js

여기서 LTS 는 Long Term Support의 줄임말로, 2년간 해당 버전에 대한 취약점 패치 및 개선 사항에 대한 패치를 보증하는 버전을 의미한다.

반면 현재 버전은 아직 개발이 진행중인 버전으로 해당 버전에 존재하는 기능이 패치를 통해 사라지거나 변경되어 새로 코드를 작성해야할 가능성이 존재하는 버전이기 때문에 안정성을 위해서 LTS 버전을 설치하는 것이 좋다.

 

설정은 기본값으로 두고 설치를 진행하면 된다.

 

설치 후, 명령 프롬프트나 VS Code 터미널에서 node -v(또는 node --version), npm -v(또는 npm --version)을 치고 실행이 되면 설치가 완료된 것이다.

 

* npm : Node Packaged Manager의 줄임말로 Node로 만들어진 pakage 들을 관리해주는 툴로, Node.js를 설치할 때 자동으로 설치된다.

 

04  웹사이트에 React 추가해보기

React 공식 문서의 웹사이트에 React 추가 문서에서 참조한 내용으로, 보다 상세한 설명을 확인하고 싶으면 링크를 참조하는 것을 추천한다.

1단계 : HTML 파일에 DOM 컨테이너 설치

편집할 HTML을 열고 비어있는 <div> 태그를 추가한 뒤, 이 <div> 태그에 id를 부여한다.

 

<div> 태그에 id="like_button_container"이라는 유일한 HTML 속성 부여

2단계 : 스크립트 태그 추가하기

<script> 태그를 </body> 앞에 추가한다.

첫 두 script는 React를 실행시키고, 3번째 script는 만든 컴포넌트를 실행하는 역할이다.

 

3단계 : React 컴포넌트 만들기

like_button.js  파일을 만들고 스타터 코드를 복사해 넣는다. 

//like_button.js 스타터 코드

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

그리고 스타터 코드(like_button.js의 맨 뒷줄) 뒤에 다음 세 줄을 추가해준다.

이 코드는 <div> 태그를 찾아 해당 태그에 React 앱을 만들어 주고, "Like" 버튼 컴포넌트를 추가해준다.

//... 스타터 코드

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

 

작업 완료 후 HTML을 실행해보면 Like 버튼이 추가되어 있고, 버튼을 클릭하면 You liked this라는 텍스트로 변경되는 것을 확인할 수 있다.

 

버튼 클릭 전

버튼 클릭 후

05  create-react app를 이용해 리액트 앱 만들기

create-react-app(CRA)은 리액트로 웹 애플리케이션을 개발하기 위해 필요한 모든 설정이 되어 있는 상태로 프로젝트로 생성해주는 도구이다. 이를 활용하기 위해서는 Node.js 14.0.0 이상, npm 5.6 이상의 버전이 필요하다.

이를 이용해 리액트 프로젝트를 생성하는 방법은 다음과 같다.

 

npx를 이용해 react app을 설치

* npx: execute npm package binaries의 줄임말로 npm 패키지를 설치한 이후에 곧바로 실행, execute까지 해주는 명령어

> npx create-react-app {project-name}

//실사용
> npx create-react-app my-app

원하는 위치를 cd 명령어로 찾아서 (이 경우 Desktop, 바탕화면에 폴더를 만들어준다) 위 명령어를 실행해주면 자동으로 설치가 진행된다. 설치가 완료되면 Happy hacking! 이라는 텍스트와 프로젝트 시작을 위한 명령어들이 마지막으로 출력된다.

 

만들어진 폴더를 VS Code 로 열어보면 다음과 같이 파일들이 생성되었을 것이다.

 

 

이후 터미널에 npm start 를 입력하고 실행하면 개발 서버를 띄워 준다.

> npm start

정상적으로 진행됐다면 터미널에 아래와 같은 문구와 같이 개발 서버 창이 뜰 것이다.

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.137.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

App.js의 p 태그 안에 아무 텍스트나 입력하고 저장하면 새로 추가한 텍스트가 화면에 적용된 것을 볼 수 있다.

 

---

참고자료

 

https://react.vlpt.us/basic/01-concept.html

https://ko.reactjs.org/docs/getting-started.html

https://eroul-ri.tistory.com/5

https://velog.io/@nemo/framework-library-gfreqbgx

https://codingapple.com/unit/react1-install-create-react-app-npx/

제로베이스 프론트엔드 스쿨 React 강의 내용