1. React란? + (정적&동적 웹페이지, 동기&비동기, Virtual DOM, SPA, TypeScript)
글을 작성하기 전에 먼저 이 글을 쓰는 목적을 알아주셨으면 합니다.
이 글을 제목에 명시 된 것들을 깊숙이 들어가 파헤치자의 의미로 작성된 글이 아닙니다.
React를 진행하면서 기본적으로 알고 있으면 좋겠다 하거나 요즘 트렌드로 웹 개발을 하면서 자주 등장하는 용어를 간단하게 무엇인지를 대략적으로 알 수 있도록 설명한 글입니다.
저처럼 비전공자이면서 시작한지 얼마 안 되신 분들이 개발을 진행하면서 대략적인 설명도 없이 코딩을 하고 계신 분들이 많을 것 같아서 조금이나마 도움이 되고자 작성한 글입니다.
초보자의 입장에서 쓴 글로 예시를 통해 이해할 수 있도록 작성하였으며, 해당 항목의 기초적인 부분을 대략적으로 이해함으로써 개발을 진행하면서 아~이런 의미였구나라고 문뜩 떠오를 수 있도록 하여 기본 개념을 익혀 좀 더 자세히 알고자 스스로 찾아볼 수 있도록 하는 것이 제 의도이지만... 글재주가 없어 가능할지는 모르겠어요.
혹시 제가 작성한 것중에 이해가 안 되거나 잘못된 내용이 있다면 알려주시면 감사하겠습니다.
그럼 시작할게요~!
1. React 란
React는 페이스북에서 개발된 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
라고 React 한국 홈페이지에 명시되어 있습니다.
React는 라이브러리이며, 컴포넌트이기 때문에 중간에 React를 삽입하여 사용할 수 있습니다. 즉, 모든 것을 React로만 개발하지 않아도 된다는 의미입니다.
또 다른 특징으로는 React는 단방향 바인딩이라는 것입니다. 흐름이 물 흐르듯 한 방향으로만 진행이 된다는 의미입니다.
2. React를 사용하면?
React는 동적이고 비동기 방식을 이용할 수 있기 때문에 복잡한 페이지를 다루는데 좀 더 효율적입니다.
| 정적 VS 동적 | |
| 정적 웹 페이지 | * 서버는 사용자의 요청에 따라 작성된 그대로를 보이도록 함. * HTML, 이미지, JavaScript 등 * 빠르고 비용이 적다. * 페이지가 한정적이다. |
| 동적 웹 페이지 | * 서버는 사용자의 요청에 따라 상황, 시간, 요청 등에 따라 데이터를 가공하여 페이지를 전달 * 상대적으로 느리고 비용이 더 든다. * 다양한 서비스가 가능하다 |
| 동기 VS 비동기 | |
| 동기(Synchronous) | * 순차적 진행 * 요청에 대한 응답을 받아야지만 다음 동작이 진행 됨 * 요청한 일을 처리 할 때까지 다른 동작들은 정지한다고 봐도 무방 |
| 비동기(ASynchronous) | * 요청에 대한 응답을 받지 않아도 다른 작업들을 처리할 수 있는 방식 |
3. 가상돔(Virtual DOM)?
DOM은 Doucument Object Model의 약자입니다.
우선, DOM이 뭐고 가상 DOM이 뭐고를 떠나서 가상 DOM을 이용하면 rendering 하는데 효율적이다는 점입니다. 가상 DOM을 이용하지 않는다고 한다면 변화가 일어날 때마다 DOM은 rendering을 일어나는 만큼 진행을 하기 때문에 비효율 적입니다. 하지만, Virtural DOM을 사용 시에는 일어나는 변화를 가상 DOM에서 감지하다가 최종적인 변화를 실제 DOM으로 변화시켜 줍니다. 이해가 되셨나요?
제가 이해한걸 쉽게 풀자면
DOM : 사장님이 의자를 좌로 한 칸, 아니다 위로 두 칸, 아니다 오른쪽으로 한 칸 이렇게 지시했을 때 모두 행동으로 옮긴다는 것이고
Virtual DOM : 사장님이 머리로 의자를 이리저리 배치해가면서 구상을 해보고 결정된 생각을 해서 오른쪽으로만 한 칸 움직여라 이렇게 지시하는 것과 같이 최종적인 변화만을 행한다는 것입니다.
예시가 조금 어긋날지는 모르지만 크게 벗어나지 않는다고 생각합니다.
| DOM(Doucument Object Model) |
| * XML이나 HTML문서에 접급하기 위한 일종의 인터페이스 * 자바스크립트를 이용해서 웹 페이지를 프로그램적으로 제어할 수 있도록 해주는 것 |
4. SPA(Single Page Application)?
SPA는 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 처리함으로써 사용자와 소통하는 웹 애플리케이션입니다.
기존 애플리케이션은 어떠한 요청을 받아 처리를 하는 경우 그 페이지 전체를 응답하는 방식이었습니다.
하지만 SPA는 처음 화면이 불러와지는 시기에 그 페이지에 관련된 모든 컴포넌트들을 로드하고, Ajax를 통하여 필요한 부분을 요청하면 그에 해당하는 부분을 JSON형태로 응답하는 것을 말합니다.
예를 들자면,
기존 방식에서는 메인 화면에서 게시판을 들어가면 헤더에서부터 바디, 푸터의 모든 것들이 다시 불러와지는 것이고
SPA 방식에서는 게시판을 클릭하면 헤더, 푸터, 사이드 메뉴 등 변화가 필요 없는 부분은 제외하고 게시판 페이지가 불러와져야 할 부분에만 Ajax를 통해 요청하고 JSON형태로 응답받는 것입니다.
SPA의 장점은 화면 전체를 렌더링 할 필요가 없어 화면 전환이 빠르고, 필요한 부분만 렌더링 하기 때문에 효율적이라는 점입니다.
단점으로는 첫 로딩 시 관련된 모든 것들이 로드되어야 하기 때문에 상대적으로 시간이 걸린다는 점입니다.
5. TypeScript?
TypeScript는 Microsoft에서 개발한 프로그래밍 언어입니다.
구체적으로 설명하기 전에, TypeScript가 대략 뭔지 알고 읽으면 도움이 될 것 같아 먼저 말하자면,
자바스크립트의 데이터 타입을 지정하도록 하여 느슨한 타입 언어를 엄격한 언어화시켜주는 것입니다.
예를 들면, 자바스크립트에서는 sum()이란 함수가 있다고 가정하고, sum(a + b)와 같이 a와 b를 더하고자 합니다.
근데 a = 'x'고 b = 'y'인 경우 자바스크립트는 느슨한 언어이기 때문에 타입에 상관없이 sum() 함수를 실행하여 'xy'라는 값을 출력해줄 것입니다.
상황에 따라서는 이것이 편리하고 좋을 수 있으나, 또 다른 상황에서는 에러 없이 동작하여 추후 문제가 될 수 있는 양날의 검과 같은 것입니다.
이러한 에메모호함을 방지하고자 자바스크립트에도 미리 타입을 지정해주어 가독성을 높이고 디버깅을 좀 더 효율적으로 할 수 있도록 도와주는 것입니다.
typescript가 이거 하나만을 위한 것은 아니지만 대략적으로는 이렇습니다.
이제부터는 좀 더 자세히 알아보도록 하겠습니다.
자바스크립트는 C나 Java언어와는 구별되는 특성이 있습니다.
1. Prototype-based Object Oriented Language
2. Scope & this
3. 느슨한 타입 언어(=동적 타입 언어)
typescript는 자바스크립트의 이러한 특성으로 인해 발생하는 문제들을 방지하고자 등장한 자바스크립트의 상의 확장(Superset)입니다.
자바스크립트는 runtime 시 타입을 체크하는 동적 타입이지만, typescript는 컴파일 시 타입을 체크하는 정적 타입입니다. 하지만, 일반적인 컴파일과 다르게 링킹 과정이 생략되어 있다고 합니다.
링킹은 여러 개의 코드와 데이터를 모아서 연결하여 메모리에 로드될 수 있고 실행될 수 있도록 모아 한 개의 파일로 만드는 작업이라고 하는데, 여기서 링커, 동적&정적 링킹까지 다루는 건... 무리인 것 같아요. 사실 저도 자세히 모르겠어요. 이 글의 포스팅 이유는 자세하게 깊숙하게 알자가 목적이 아니니까요.
Typescript는 정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈과 ES7의 Decorator를 지원합니다.
또한, TypeScript는 ES5의 Superset이기 때문에 ES5문법을 그대로 사용할 수 있으며, ES6의 새로운 기능들을 위한 Babel과 같은 별도 트랜스 파일러를 사용하지 않아도 기존 자바스크립트 엔진에서 실행할 수 있습니다.
이것으로 React가 무엇인지 React를 하면서 필요한 몇 가지의 기본 개념들을 정리하는 것을 마칩니다.
부족한 것이 많겠지만, 자세한 부분은 스스로 좀 더 찾아서 공부하시는 것을 추천드립니다.