[React] React란 무엇인가?

📢 현재 추구하는 목표

현 목표하는 프로젝트는 기도제목 업로드 SNS이다.

기도제목을 업로드하고 인스타그램과 같이 좋아요 기능, 업로드 기능, 프로필 기능을 구현하기 위해 공부를 시작했고,

내가 만들고 싶은 프로젝트가 있고, 이를 웹 앱으로 만들고 싶었던 것이다.

 

유튜브에서 찾아보니 정말 방대한 양의 데이터가 쏟아져 나왔다.

그중 내가 선택해야 할 개발 언어는 JS(javascript)라는 것을 알게 되었고, react.js나 vue. js 같은 라이브러리를 사용하면

보다 크리에이티브하고 좋은 웹을 만들 수 있다 하기에 바로 공부에 들어갔다. 

그전에 가장 중요한 것은 react,vue,angular와 같은 라이브러리의 뿌리인 바닐라 JS를 알고 갔어야 했다.

강의를 선택하는데 처음엔 너무 막막하기만했다. (비전공자에 커뮤니티도 잘 활용 못하는 성격이기 때문이다.)

 

그래서 그냥 죽어라 구글링을 시작했다. 이때 만나게된 너무 감사한 유튜버 분들이 있다.

드림 코딩, 노매드 코더, 생활코딩, 코딩 애플 등의 영상을 무작정 보면서 기본적인 지식을 흡수하기 시작했다.

그중 가장 인기가 있고 안정적이라 판단된 갓고잉(생활코딩)님의 강의를 시작으로 자바스크립트에 입문하게 되었다.

 

인프런에서 갓 고잉님의 자바스크립트 기본강의를

노매드 코더님의 바닐라 JS를 이용한 To Do List, Paintbrush 웹을 만들게 되었다.

JS는 정말 너무 방대한 양의 내용이 있기 때문에 다 공부하는 것은 어렵다. 때문에 동작 원리에 익숙해지는 이 타이밍에

라이브러리로 넘어가 보려 한다.

 

그리고 현재 페이스북(현:메타)의 라이브러리인 React공부를 시작했다.

 

여기서 잠깐! 내가 Vue.js가 아닌 React를 선택한 이유.

 

Q. Vue.js를 선택하지 않고 React를 선택한 이유는 왤까?

A. 수많은 구글링을 통해 vue와 react 중 어떤 라이브러리를 선택해야 하나 고민을 했다. (angular은 고민도 못했다...)

vue는 러닝 커브가 낮기 때문에 나 같은 코생아(코딩 신생아)에겐 알맞은 라이브러리 일 수 있었다.

+) 내가 계획한 웹 프로젝트의 사이즈가 커지지 않는다면 vue가 어울리지 않을까?라는 생각을 했었다.

그럼에도 react를 선택한 이유는 react는 현재 한국에서(2021기준) 가장 인기 있는 라이브러리이며,

vue를 공부하고 react로 넘어가는 것보다 react를 공부하고 vue는 넘어가는 것이 훨씬 쉽다는 의견이 정말 많았다.

( "react, vue 어떤 라이브러리를 공부해야해?"보다 두 라이브러리 모두를 공부하고 구현하는 것은 중요하다. IT는 빠르게 변화하기 때문에 react는 영원한 라이브러리일 수 없기 때문이다.)

그렇기에 난 react를 선택하게 되었다.

---

📢 리액트 공부 계획

react공부는 김민준 님의 패스트 캠퍼스와 ZeroCho님의 웹 게임을 만들며 배우는 react로 공부할 예정이다. 

+) 갓고잉 님의 redux와 react-redux는 반드시 봐보도록 하자.

React 공식 문서를 따라서 시작하는 것이 정말 Best일 수 있지만,,,, 난 어렵더라,,, 

 

TMI를 멈추고 이제부터 react란 뭘까에 대한 글을 작성하도록 하겠다.

---

✨React란 무엇인가?

리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다.

하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다.

프런트엔드 라이브러리 / 프레임워크

리액트는 정말 인기 있는 프런트엔드 라이브러리입니다.

리액트에 대해서 알아보기 전에, 이 프런트엔드 라이브러리란게 정확히 뭔지, 그리고 왜 필요한건지에 대해서 알아보자

웹사이트를 만들기 위해선, 사실 프론트엔드 라이브러리의 도움 없이도 만들어낼 수 있다.

(단순히 정적 페이지를 만드는 거라면 그냥 HTML과 CSS만을 이용해 만들면 된다. (NO 자바스크립트) 여기에 자바스크립트를 더해주면, 유저의 행동 흐름에 따라서 동적으로 화면을 보여줄 수 있게 된다.)

 

요즘의 웹은요, 단순한 웹 페이지 가 아니다. 요즘 웹은 애플리케이션이다.

브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은 것들을 할 수가 있다.

가령 쉬운 예시로 하단에 있는 react 공식 문서 페이지에서 side bar에 있는 목차들을 눌러보면 

시작하기 – React

페이지를 새로 로딩하며 화면 깜빡임이 있는 것이 아닌 한 페이지 내에서 부드럽게 동작하며, 모바일 화면에서도 앱과 비슷한 느낌으로 동작을 한다.

 

이 리액트는 3가지의 대표적인 특징을 가지고 있다.
1. JSX 문법
2. Component 기반
3. Virtual DOM

 

react는 3가지 부분에서 좋은 면모를 보여주는데 의견을 단다.

1. 사용자 인터페이스, 사용자 경험면에서 우수한 면모를 보여준다.

2. 데이터를 화면에 반영할 때 싱크로나이즈가 우수하다.

3. 재사용 컴포넌트가 좋아 유지보수 면에서 좋은 모습을 보여주고 있다.

 

 

---

페이스북은 왜 리액트를 만들게 됐을까?

페이스북이 리액트를 만들기 전에도, 이미 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재했습니다. 그리고 해당 프레임워크들은 데이터단을 담당하는 모델(Model), 사용자의 화면에서 보이게 되는 뷰(View), 그리고 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러 (Controller)로 이뤄진 MVC 패턴, 그리고 MVC 에서부터 파생된 MVVM(View Model), MVW(Whatever) 등의 패턴들로 이뤄져 있죠.

 

여기서 공통점은 바로 모델입니다. 방금 언급했던 프레임워크들의 모델은, 대부분 어떻게 작동하냐면, 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜줍니다. 여기서 핵심적인 부분은 변화시켜준다는 부분입니다. 일단 첫 화면을 보여주고, 변화에 따라 필요한 곳을 바꿔주는 거죠.

 

**”변화(Mutation)”**라는 것은 상당히 복잡한 작업입니다. 특정 이벤트가 발생했을 때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 뷰를 업데이트해줄지 로직을 정해줘야 하는데요, 페이스북에서는 리액트를 만들기 전에 이러한 발상을 했습니다:

 

그렇게 하면 진짜 간단하겠죠? 그런데 브라우저가 무슨 게임 엔진도 아니고, DOM 기반으로 작동하는 이 페이지는 그때그때 새로 뷰를 만들어버리라고 하면 성능적으로 엄청난 문제가 있을 것입니다.

 

그래서 사용하는 게 바로, Virtual DOM입니다.

Virtual DOM 은 가상의 DOM입니다. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운걸 넣는것이 아니라, 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이죠.

이 Virtual DOM을 사용함으로써, 데이터가 바뀌었을 때 더 이상 어떻게 업데이트할지를 고려하는 게 아니라, 그냥 일단 바뀐 데이터로 일단 그려놓고 비교를 한 다음에, 바뀐 부분만 찾아서 바꿔주는 거죠.

다음 동영상을 보시면 이해하기가 쉽습니다.

• React and the Virtual DOM (https://www.youtube.com/watch?v=muc2ZF0QIO4)

Virtual DOM 은 DOM 변화를 최소화시켜주는 역할을 하는데요, 이 횟수를 최소화시키는 것은 성능적으로 매우 중요한 이슈입니다. 자세한 내용은 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? 포스트에서 확인해보세요.

 

[출처: 패스트 캠퍼스]