Chapter01. 리엑트란?

<< 학습 목표 >>

1. 라이브러리를 설명할 수 있다.

2. SPA에 대해서 설명할 수 있다.

---

리엑트(React)는 JavaScript(이하 JS) 라이브러리(Library)임

프로그래밍에서 라이브러리는 철물점에 비유할 수 있음

 

나무를 잘라야하는데 톱이 없다면?

어떻게든 직접 나무를 자를 순 있겠지만 깨끗하게 잘리지 않고 자르는데 굉장히 오래 걸림

가장 효율적인 방법은 철물점 가서 톱을 사와 자르는 것임

철물점에 가는 시간, 톱을 사는 추가 비용이 발생하겠지만 효율적인 방법 중 하나임

 

프로그램을 개발하면서 어떤 기능이 필요하다면?

어떻게든 그 기능을 직접 만들 순 있겠지만 실수로 인해 기능상 문제가 있을 수 있고 만드는데 시간이 굉장히 오래 걸릴 수 있음

가장 효율적인 방법은 그 기능을 불러다 사용하는 것임

그 기능을 불러다 사용하기 위해서는 기능을 찾는 시간, 기능을 불러다 사용하기 위해 공부해야하는 시간과 수고가 발생하겠지만 효율적인 방법 중 하나임

---

웹 사이트의 규모가 커지면 웹 페이지가 굉장히 많아지게 됨

네이버를 예로 들어보자

네이버는 1차 메뉴만 봤을 때 메일부터 웹툰까지 그리고 이 외에도 굉장히 많은 메뉴가 존재함

각 메뉴 마다 페이지가 존재해야함

또 각 1차 메뉴 안에서 또 각 2차, 3차 메뉴가 있으므로 네이버 서비스의 페이지는 수백개가 넘을 것

(이 예는 저의 생각을 표현한 예시로 사실이 아닙니다)

 

이렇게 페이지가 점점 많아지는 불편함을 해결하기  위해 나온게 SPA(Single Page Application)임

SPA란 페이지가 하나만 있는 서비스로 페이지에서 보여줄 컨텐츠가 바뀌었을 때 웹 페이지를 다시 로드하지 않고도 보여줄 수 있는 기술임

 

SPA 기능을 사용하면 하나의 페이지에서 여러 컨텐츠를 보여줄 수 있음이 SPA 기능이 필요할 때 개발자가 직접 개발할 수 있겠지만 굉장히 시간이 오래 걸림몇 시간 정도가 아니라 몇 개월에서 평생이 걸릴 수 있음

 

이럴 때 SPA 라이브러리를 찾아 SPA 라이브러리를 공부하고 적용한다면 효율적으로 적용할 수 있을 것대신 SPA 라이브러리를 찾는 시간과 SPA 라이브러리를 공부하는 시간이 소요되긴 하겠지만 직접 개발하는 것 보다 비교가 안될 정도로 훨씬 빨리 SPA 기능을 적용할 수 있을 것

---

SPA 라이브러리(또는 프레임워크)로 유명한 것들은 엥귤러(NGULAR), 리엑트(React), 뷰(Vue)가 있음

여기서 우리는 리엑트를 배움

 

이 카테고리는 HTML, CSS, JS 공부를 끝내고 리엑트를 공부하려는 사람들을 위한 카테고리임

리엑트에 대해서 이미 알고 있거나 리엑트를 더 깊게 공부하려는 분과는 맞지 않음

 

리엑트(React)는 HTML, CSS, JS에 대한 사전 지식이 필요함

만약 HTML, CSS, JS를 잘 모른다면, 또는 리엑트 공부를 따라오면서 어려운 부분을 만나면 HTML, CSS, JS 공부를 하고 오자

 

보통의 블로그나 책의 설명을 보면 리엑트에 대해서 설명하고 장,단점이나 역사를 설명하는데 리엑트를 사용해보지 않았는데...

페이지가 많은 대규모 서비스를 개발 해본적이 없는데...

이런 부분들을 이해할 수 있을까?

괜히 지면 차지가 아닐까 싶음

 

리엑트의 장, 단점은 리엑트를 다 배우고 난 뒤에 이해할 수 있으니 다 배우고 난 후 장, 단점을 보자