[React #1] 리액트가 무엇인가?

웹 개발에 관심이 있는 사람이라면,

"리액트"라는 단어를 한번쯤은 보았을 것이다.

이 단어가 왜 많은 사람들에게서 언급이 되는 것일까?

 

오늘의 포스팅에서는 리액트의 전반적인 개요를 둘러볼 예정이다.

 

리액트란?

내가 이해한 수준에서 명쾌하게 말을 하자면,

리액트는 싱글 페이지 어플리케이션을 개발하는데 도움을 주는 프레임워크라고 생각이 된다.

그렇다면 싱글 페이지 어플리케이션이란 무엇인가?

 

싱글 페이지 어플리케이션?

싱글 페이지 어플리케이션이란, html 파일은 1개 뿐이다. 필요한 부분의 View만 새롭게 그린다.

통째로 html을 받아올 필요가 없다.

 

개발되기 전에 웹 개발 상황을 살펴보자.

1. 클라이언트가 서버에게 웹 페이지를 요청한다.
2. 서버는 클라이언트에게 HTML 화면 통째로 보내준다.
3. 클라이언트가 화면에 어느 부분을 클릭한다.
4. 서버가 클라이언트에게 HTML 화면 통째로 다시 보내준다.

ajax를 이용해서 부분 화면을 그리는 방법도 있다.

하지만 페이스북과 같은 웹뷰는 매우매우 복잡해서 ajax로 그리기가 매우 복잡하다.

그래서 리액트가 등장했다.

 

리액트 특징

그럼 여기서 리액트가 무엇을 하는 것인가?

리액트는

ajax를 이용한 데이터 변경감지 ->UI가 자동 업데이트 되도록 프로그래밍이 가능

 

이 때, 변경을 감지하는 엔진은 Demon이라고 한다.

항상 변경을 감지해야하기 때문에, 계속해서 서버처럼 돌고있어야 한다.

그 서버는 nodejs로 이루어져있다.

 

다시 말해서, 리액트는 UI를 Demon엔진을 통해서 지켜보고 있다.

변경이 필요한 부분은 해당 부분만 UI를 새롭게 그려준다.

 

• 리액트를 이용하면 html 페이지는 1개이다.
• 수시로 태그부분이 바뀐다.
• JSX 문법을 이용한다.

이정도만 이해하자!

 

리액트 공부해야하는 것!

1. 엔진에게 어떠한 부분만 변경하도록 지칭하는 공부!
2. 지칭을 넘어서서 효율적으로 UI를 재구성하는 공부!
3. JSX 문법 익히기

정도로만 공부하는 것을 목표로 하자!