프론트엔드 개발자를 위한 리액트 기초 Part-1

 

필자는 10년 정도 디자이너를 하다가 30대 초반에 개발업에 도전하게 되었으며 지금은 프론트엔드 개발자로 이직을 하기 위해 개발공부를 하고 있다. 솔직히 첫술에 배부르랴 싶지만 그래도 차근차근 공부를 하다보면 결국에는 내가 원하는 개발자가 되어있을 것 같아 이렇게 글을 남기게 되었다. 부디 이 글을 읽는 예비 개발자와 주니어 개발자들에게 도움이 되었으면 하는 바램이다.

 

---

React란 무엇인가?

 

- 페이스북에서 만든 편리하게 웹페이지를 만들어 주는 Javascript 라이브러리이다.

 - 리액트는 UI 기능만 제공하며 전역 상태 관리, 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 한다.

 - 이러한 리액트의 진입 장벽을 낮추기 위해서 create-react-app을 만들었다.

 - API 통신이나 사용자 이벤트를 통해서 프로그램의 상탯값을 변경합니다.

 - 만일 리액트와 같은 도구를 사용하지 않는다면 브라우저의 돔을 직접 업데이트 해야 합니다.

 

라이브러리란?

- 다른 개발자들이 여러 사람들을 위해서 만들어 놓은 코드
- 대부분의 개발자들이 모든 것을 직접 만들지 않으며 만든 코드를 조합해서 사용한다.

Single Page Application

 

- 단일 페이지로 구성된 웹 어플리케이션을 말한다.

- SPA는 화면 이동시에 필요한 데이터들을 서버사이드에서 HTML로 전달받지 않으며 필요한 데이터들만 서버로부터 JSON 으로 전달받게 된다.

- 동적으로 렌더링하는 방법이다.

 

[SPA 참고자료](https://www.excellentwebworld.com/what-is-a-single-page-application)

 

 

기존 어플리케이션과 SPA의 차이

 

- 기존 어플리케이션은 화면 이동시에 필요한 HTML을 서버사이드에 받아서 다시 로딩한다.(시간이 오래 걸림)

- 이는 각 url로  HTML 요청을 보내면 새로운 HTML을 클라이언트에게 내린다.

- SPA에서는 화면 구성에 필요한 HTML을 클라이언트가 가지고 있다.

- 서버사이드에서는 필요한 데이터들을 요청하며 JSON으로 받는다. 

- url에 따라서 필요한 부분만 업데이트 해준다.

- 그렇기 때문에 기존의 어플리케이션에 비해서 화면을 구성하는 속도가 빠르다.

 

클라이언트

- HTTP 요청을 보내는 주체로 유저가 사용하는 브라우저를 말한다.

서버

- 브라우저에서 요청한 데이터를 내려주는 주체로 우리가 정한 규칙대로 행동하는 컴퓨터를 생각하면 된다.

 

Component 기반의 UI

 

- 컴포넌트는 우리가 필요로 하는 Component를 만들고, 이 Component를 필요로 하는 곳에서 원하는 대로 사용한다. 이를 재사용성이 좋은 컴포넌트라 한다.

 

 

모든 플랫폼에서 사용 가능하다.

 

- `React`는 웹개발 이외에도 `React Native`를 통해서도 앱을 만들 수 있다.

- `Electron`을 통해서 PC앱도 만들 수 있다.

 

서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 차이

 

SSR

 

- 서버사이드 렌더링(SSR)은 페이지를 이동할 때마다 새로운 페이지를 요청한다.

- 모든 탬플릿은 서버 연산을 통해서 렌더링되고 완성된 페이지 형태로 응답한다.

- 이전의  SSR(Server Side Rendering)를 사용할 때에는 변화가 있을때마다 새롭게 전체 페이지를 로드해야 했다.

- ajax가 나온 이후에는 바뀐 부분만 특정해서 변화시킬 수 있지만 동작 하나하나를 지정하기 쉽지 않았다.

- 서버에서 HTML,CSS,JS 파일을 렌더링 하는 방식은 안드로이드와 IOS와 같은 다른 플랫폼과 서버를 공유할 수 없어서 비효율적이었다.

 

CSR

 

- SSR과 달리 서버로부터 데이터를 받아서 클라이언트에 렌더링하는 방식이다.

- 서버로부터 데이터를 받아서 바뀐 부분의 데이터가 있는 화면만 새롭게 렌더링 한다.

- 사용자 경험을 높여주면서 효율적으로 클라이언트 리소스를 사용하게 한다.

- 서버가 HTML,CSS,JS 파일을 렌더링하는 대신 데이터를 보내주는 경우에는 안드로이드,IOS,웹 모바일 등 다양한 플랫폼이 서버를 공유할 수 있게 한다. 이를 통해 효율적으로 서버를 운영할 수 있게 한다.

 - CSR은 검색엔진 SEO 최적화를 할 수 없는 문제가 있다. 하지만 리액트에서는 CSR과 SSR을 함께 사용할 수 있다.