React (11/25)

React란 무엇일까?

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 입니다.

"컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

SPA를 전제로 하고 있으며, Virtual DOM 을 활용하여 업데이트 해야하는 DOM요소를 찾아서

해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있습니다.

 

SPA란??

SPA 이전 Multi-Page-Application(MPA) 아키텍처에서는 페이지마다 서버에 해당 페이지의

HTML 파일을 요청하고 이를 브라우저가 응답으로 받아 유저가 볼 수 있도록 그려주는 구조였습니다.

 

SPA는 서버에서 HTML 페이지들을 일일이 다운로드하는 것이 아니라,

하나의 마크업(markup) HTML 파일을 받아 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시합니다.

이로 인해 사용자가 페이지를 다시 로딩할 필요도 없어진거죠!

즉, 페이지를 이동할 대마다 발생하는 깜빡임이 없는거죠.

 

 

 

개발환경설정

vscode (prettier 확장프로그램 설치) _ 자동 줄바꿈

 

npm 과 yarn

• npm 이란?<aside> 💡 비슷한 친구로는 yarn이 있습니다. 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"입니다.
• </aside>
• NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소 입니다. 우리는 npm에서 여러 패키지를 다운받아 활용할 수 있습니다.

yarn 설치하기

터미널에서 yarn 설치하기

우리는 npm의 역할과 동일하지만 npm보다 조금 성능적으로 개선된 yarn을 사용할 것 입니다. 아래 명령어를 입력해서 yarn을 설치해봅시다.

 

 

CRA (Create-react-app) 란?

<aside> 👉 리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구 입니다.

</aside>

마트에서 레고를 보신 분들은 아시겠지만, 레고는 네모 블럭, 긴 블럭, 혹은 귀여운 캐릭터만 따로 구매할 수 있죠? 만들고 싶은 성 모양에 맞춰 누구는 네모 블럭만 잔뜩 살 것이고 누구는 성문과 대포까지 살 겁니다. 하나씩 구매하기 번거롭다면요? [해리x터 성만들기]같은 패키지를 사겠죠!

 

React도 마찬가지입니다! 우리가 웹사이트에 만들기 위해 필요한 것들을 하나씩 설치해야 합니다. (webpack, babel 같은 녀석들을 배워야 하지만요.) 하지만, 이제 갓 걸음마를 뗀 우리가 하기에는 조금 벅찰 수 있어요. 그래서 우리는 리액트를 이용해서 웹사이트를 만들 때 필요한 것을 자동으로 설치해주는 CRA를 사용하는 것 입니다.