기본 콘텐츠로 건너뛰기

1. Welcome to React!

1. Welcome to React!

본 포스팅은 리액트를 처음으로 공부하기 시작하는 사람들을 위해 제작되었다. 구글에 영어로 react라고만 쳐봐도 기본적인 개념을 배울만한 블로그는 아주 많지만 막상 처음부터 하나하나 따라할 수 있는 튜토리얼과 같은 게시글이 없는 것 같아 이 부분에 초점을 맞춰 포스팅을 써보려 한다.

자바스크립트의 라이브러리

우선 리액트는 페이스북이 직접 개발한 자바스크립트의 라이브러리이다. 즉, 문법과 기능에 확장이나 변화가 있을 수는 있지만 그 뼈대는 자바스크립트에 있다는 것이다. 따라서 리액트를 공부하기 전에 자바스크립트의 기본적인 변수선언(const, let, var 등) 같은 문법을 알아둔 후 공부하는 것이 좋다.

참고하면 좋을만한 사이트 : https://opentutorials.org/course/743

Virtual Dom

필자가 리액트를 공부하며 처음으로 느낀 장벽은 바로 virtual DOM이라는 개념이다. 이 개념에 대해 구글에 검색해본 결과 다음과 같이 요약할 수 있다.

변한 부분만 다시 그린다.

이는 다시 말하면 리액트가 출시되기 전까지 모든 프레임워크는 변하지 않은 부분도 불필요하게 다시 그리고 렌더링 했다는 것이다. 아래에서 Angular라는 구글의 웹 개발 프레임워크와 React의 차이를 예시를 들어 비교해보자.

출처 - 블로그 : http://blog.naver.com/PostList.nhn?blogId=songc7

위의 두 그림을 차례로 그린다고 가정하자. 우선 누가 어떤 방법으로 그리던 모두 처음 그림은 캔버스에 백지상태부터 그려야 한다. 하지만 두번째 그림을 이어서 그려야 할때 Angular는 새로운 캔버스에 전체 그림을 다시 그려서 우리에게 보여주는 반면 리액트는 처음과 두번째 그림을 비교해서 달라진 부분만 찾아서 그린 후 원래 그림에 덮어서 보여준다. 여기서 "속도"의 차이가 명확하게 발생한다. Angular을 포함한 기존의 프레임워크들은 전체 그림(html과 css 등등)을 모두 캔버스(real DOM)에 다시 그리는 반면 리액트는 그림을 비교한 후 변화한 부분만 새로운 캔버스(virtual DOM)에 그린 후 원래 캔버스(real DOM)에 덮어서 보여준다.

이렇게 변화하는 부분만 다시 그린다는 점이 얼마나 효율적인지는 우리가 웹사이트를 돌아다닐때 화면을 떠올리면 쉽게 체감할 수 있다. 애니메이션이 부분적으로 들어가거나 버튼이 클릭되며 색이 바뀌는 등 전체 페이지가 아니라 부분적으로 변화하는 경우마다 생기던 오버헤드를 리액트는 virtual DOM이라는 개념으로 해결한 것이다.

Flux Model

리액트의 두번째 큰 특징은 바로 기존의 프레임워크들이 가지는 MVC 모델과 완전히 다른 Flux Pattern을 채택했다는 것이다. 사실 Flux pattern은 Redux 라이브러리의 특징이라고 봐야 하지만 거의 모든 react app들이 redux계열을 채택하므로 여기서 적겠다.

출처 - https://www.tektutorialshub.com/asp-net-core/asp-net-core-mvc-design-pattern/

우선 MVC model에 대해 알아보자. MVC는 각각 Model, View, Controller의 약자로 매우 단순한 구조를 가지고 있다. 위의 그림과 같이 컨트롤러가 model을 조작하고 조작된 model이 DOM에 렌더링되며 우리에게 보여지는 구조이다. 위의 그림은 단순화되어있지만 MVC 모델은 세 구성요소 사이에서 데이터의 양방향 흐름이 활발하다 예를들어 controller가 view에게 action을 가하면 그에 대한 처리는 model이 하고 다시 렌더된 view가 controller에게 notify되는 등 하나의 동작에도 구성요소들 사이에 데이터의 이동이 활발하다. 페이스북이 리액트를 개발하게 된 이유가 바로 여기에 있다. 페이스북은 SNS 서비스를 제공하기 때문에 필연적으로 유저들의 소통이 많고 그에따라 데이터의 교류도 활발해진다. 하지만 MVC 모델은 데이터의 흐름이 양방향이기 때문에 이를 유지보수하기 매우 힘들다. 따라서 이 부분을 개선한 Flux model을 구현했다.

출처 - https://haruair.github.io/flux/docs/overview.html

Flux 모델은 데이터의 단방향 흐름에 초점이 맞춰져 있다. 따라서 MVC 모델과 확실히 다른 종류의 구성요소들이 소개되었다. 우선 유저가 interaction 하는 부분은 view이다. view에서 특정 동작을 하면 action이 발생하는데 이는 Dispatcher라는 컴포넌트가 catch한다. 이후 dispatcher는 action을 읽고 store에 저장된 데이터를 조작한다. 그리고 이렇게 store 안의 데이터가 변화할 경우 이를 subscribe(구독)하고 있는 view 컴포넌트들에게 변화된 값을 뿌리고 view가 다시 렌더한다. 이는 데이터의 흐름을 단방향으로 바꾸어 예측하거나 어플리케이션을 유지보수하기에 쉽도록 한다.

Hard, but Worth It

출처 - Google Trend

리액트는 필자가 공부를 하며 주변에서 들어본 말 뿐만 아니라 실제로 학교 수업에서 공부를 하며 느낀 바로 처음 배우기 시작할때 진입장벽이 매우 높은 편이다. 그 이유는 여러가지가 있는데, 우선 개념이 많이 어렵다. 위에서 설명한 virtual DOM과 flux 모델을 처음 배울때 필자도 거의 울뻔했다. 또 인터넷에 공개된 자료중에 한글로 된 포스팅을 찾기가 쉽지 않고 그 또한 초심자가 보기에 어렵다. 하지만 이렇게 높은 진입장벽을 뚫고 나서부터는 상당히 자유롭고 현재 제일 각광받는 웹 개발 언어인 만큼 유용하게 사용할 수 있다. 이에 앞으로의 포스팅은 모두 처음 리액트를 시작할때에 맞춰 기초부터 업로드할 예정이다. 모두 화이팅!

from http://jangsus1.tistory.com/6 by ccl(A) rewrite - 2020-03-11 01:54:27

댓글

댓글 쓰기

이 블로그의 인기 게시물

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...
댓글 쓰기
자세한 내용 보기

(번역)Angular - User Input

(번역)Angular - User Input (번역)Angular - User Input User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models. User input은 DOM 이벤트를 실행시킵니다. 우리는 그 이벤트들을 component들과 model들에게 업데이트된 값을 제공하는 이벤트 바인딩을 통해 듣습니다. User actions such as clicking a link, pushing a button, and entering text raise DOM events. This page explains how to bind those events to component event handlers using the Angular event binding syntax. 링크나 버튼을 눌러 텍스트를 타고 들어가는 유저들의 액션은 DOM 이벤트를 일으킵니다. 이 페이지는 그러한 이벤트들을 어떻게 Angular syntax를 이용해 component이벤트 핸들러들로 묶을 수 있는지 설명합니다. Binding to user input events User input이벤트에 바인딩하기(묶기) You can use Angular event bindings to respond to any DOM event. Many DOM events are triggered by user input. Binding to these events provides a way to get input from the user. 여러분은 Angular이벤트 바인딩을 어느 DOM이벤트에나 응답하도록 사용할 수 있습니다. 이런 DOM이벤트에 바인딩을 해두면 사용자들로부터 input을 받을 수 있게됩니다. To bind to a DOM event, surround the D...
댓글 쓰기
자세한 내용 보기

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증...

[django] django rest framework 로그인 과정 | 장고 로그인 | 인증... django 는 기능이 참 너무 많다 ^^; 지금은 서버는 django로, 프론트는 angular를 붙여서 간단한 웹을 만들어 보려고 한다. 웹 만들때 항상 회원가입/로그인 기능은 맨 앞에 구현한다. 어떻게 구현하면 좋을까... 찾아보다가 이 기능을 구현할 수 있는 방법이 너무 많아서 정보를 찾기 더 어려웠다. 일단 나는 django에서 django rest framework라는 것을 사용해서 API를 만드려고 한다. 순수 django 튜토리얼에는 바로 template 랑 연결해서 설명하는 부분이 많았다. 나는 그냥 API 만 만들고 싶다고!! 그래서 찾은 것이 django REST framework. https://www.django-rest-framework.org/api-guide/authentication django REST framework 설치 using pip pip install djangorestframework settings.py INSTALLED APPS 에 추가해야함 INSTALLED_APPS = [ ... 'rest_framework', ] django REST framework 에서도 인증 관련해서 제공하는 것이 1개가 아닌 여러 개다. 나는 그중에 TokenAuthentication을 이용해서 로그인을 구현해 보려고 한다. TokenAuthentication Token authentication is appropriate for client-server setups, such as native desktop and mobile clients. 이렇게 나와있어서 내가 하려는 것과 일치해서 이걸로 결정 ~ 솔직히 처음 로그인을 구현하려고 하면 도대체 그 과정이 어떻게 되는지 모를 수 도 있다. 나는 쉽게 정리하면 아래와 같은 과정이라고 생각한다. 로그인 로그아웃...
댓글 쓰기
자세한 내용 보기