[TIL] 2020-03-13

[groomedu]

가장 핫한 프런트엔드 라이브러리🔥, React 가지고 놀아보기 

 

[생활코딩]

React state까지 수강

 

[배운 내용]

- React는 페이스북에서 만든 웹 프레임 워크이다.

- 예전에는 단순히 정적인 정보만 보여주는 사이트가 많았다.

- 하지만 지금은 웹상에서 정보를 입력하면 그 정보가 바로바로 업데이트된다.

- 그렇기 때문에 요즘 웹 애플리케이션은 쉽게 동적 인터페이스를 나타내 줄 수 있다.

- 하지만 이런 동적 인터페이스에는 수 많은 상태 관리가 필요하기 때문에 React가 만들어짐

- 페이스북은 수 많은 타임라인이 존재하고, 이 타임라인 안에 수많은 요소가 들어간다. (사진, 글, 좋아요, 댓글)

- 하지만 웹 라이브러리의 도움 없이 HTML, CSS, Javascript로 이 모든 것들을 작업한다면 수천 줄의 코드를 작성해야 한다.

- 하지만 React를 통해 반복되는 수많은 타임라인을 간결하게 정리하고, 코드를 재사용함으로써 기존보다 코드량을 훨씬 줄일 수 있으며, 그만큼 유지보수도 쉬워진다.

- 그리고 페이스북은 실시간으로 변화하는 데이터를 바로바로 출력한다.

- 하지만 관리해야 할 요소가 많아짐에 따라 관리를 해주는 로직을 작성하는 것도 엄청 힘든 일이며, 유지보수 또한 말도 안되게 고된 일로 변하게 된다.

- 이러한 이유로 React는 Virtul DOM이라는 것을 사용한다.

- 화면을 다시 렌더링해주기 전에 미리 Virtual DOM에 Elements를 넣고 기존의 DOM과 비교를 통해 바뀐 부분만 다시 렌더링 하는 형식이다.

- 이렇게 함으로써 React는 비효율적인 DOM 조작을 줄임으로써 브라우저 내에서 발생하는 연산의 양을 줄여 성능을 개선하는 것이다.

 

< React의 특징 >

 

1. Virtual DOM

- Virtual DOM은 이름 그대로 가상의 DOM이다.

- React에서 인터렉션이 발생하면 바로 브라우저의 DOM에 접근하여 변화를 반영하는 것이 아니라, Virtual DOM에 한번 렌더링하고, 이를 기존의 DOM과 비교를 하여 변화가 필요한 곳만 렌더링 한다.

- 쉽게 말하자면, 바뀐 데이터로 전체 그림을 그려주고 비교를 한 다음, 바뀐 부분만 찾아서 바꿔주는 것이다.

- 이러한 작업을 통해서 실제 브라우저에서 DOM의 조작을 최소화할 수 있다.

 

2. 엄청난 생태계

- 글로벌 IT 기업인 페이스북이 만든 것이므로, 유지보수가 소홀히 되기 어렵고, 계속해서 신기능을 업데이트하고 있어서 웹 개발하기 수월해졌으며, 그만큼 인기도 더 상승하여 커뮤니티 또한 잘 형성된 라이브러리이다.

- 여러 글로벌 IT 기업인 Airbnb, Twitch, Khan Academy, Facebook, Kakao, Naver 등 여러 기업에서 React를 활발하게 사용하고 있다.

3. Webpack과 Babel

- React에서는 Webpack과 Babel을 사용한다.

- React 프로젝트에서는 수많은 컴포넌트가 존재한다.

- 이 수많은 컴포넌트를 하나로 결합하는 데 사용되는 것이 Webpack이라 한다.

- 또, React 프로젝트에서는 ECMA Scripts라는 표준화된 자바스크립트 문법이 사용되는데, 이 스크립트를 사용할 수 있게 해주는 것이 Babel이다.