[포스코x코딩온] 웹개발자 입문 과정 8주차 | React.js 정의 및 설치(MAC)

1.React란?

React 페이지

 한마디로, 화면을 만들기 위한 자바스크립트 라이브러리이다.

 (*라이브러리 : 자주 쓰는 기능들을 모아 놓은 것)

 

 

 가. Virtual DOM(가상 돔)

  자바스크립트 언어를 사용해서 웹 애플리케이션이 많이 생성되고 있으나

  큰 규모의 애플리케이션 구조를 관리하려면 순수하게 자바스크립트만으로는 어려움이 존재한다.

  따라서 지금까지 수많은 프레임워크(Vue.js, Anlgular 등)들이 이러한 어려움을 해결하기 위해 노력해 왔다.

  (*프레임워크: 필요한 기능들이 이미 만들어져 있는 기본 틀)

 

 

  이 프레임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-ViewModel) 아키텍처를 사용하는데,

  보통 뷰를 변형하여 변경된 사항을 반영한다.

  그러나 애플리케이션 규모가 커지면 커질수록 어떤 부분을 찾아서 변경할지 규칙을 정하는 것이 어려워지고,

  경우에 따라서는 동일한 부분을 여러 번 중복해서 작성해야 할 수도 있다.

  이렇게 되면 성능도 떨어질 수 있다는 문제가 있다.

 

  이에 페이스북 개발팀은 어떤 데이터가 변할 때마다 어떤 변화를 주는 것이 아닌,

  기존 뷰를 날려버리고 처음부터 새로 렌더링 하는 방식을 고안해 냈다.

  이것이 바로 Virtual DOM의 개념이다.

  아래의 내 부족한 그림을 보면 기존 방식과의 차이를 알 수 있다.

Virtual DOM vs Browser DOM

 

  Virtual Dom은 말 그대로 "가상의 돔"으로, 웹페이지와 실제 돔 사이의 중간 매개체 역할을 한다.

  웹페이지들은 사용자와 상호작용을 하는 기능이 많다.

  이러한 상호작용에 의해서 화면의 업데이트가 수시로 이루어지는데,

  기존 방식처럼 화면을 업데이트할 때 돔을 직접 수정하게 되면 성능에 많은 영향을 미치게 된다.

  (변화가 있을 때마다 화면을 전체 렌더링한다.)

 

 

  반면 리액트는 VirtualDom을 사용하여 웹페이지를 직접 수정하는 것이 아니라

  업데이트를 해야 하는 최소한의 부분만 찾아서 업데이트하므로   

  기존 방식보다 업데이트 속도도 빠르며 성능도 더 나아지게 된다.   

 

 나. Component

 

  또 React에서 중요한 개념은 Component라는 개념이다.

  Component란 React프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다.

 

  React는 모든 페이지가 Component로 구성되어 있고, 

  하나의 컴포넌트는 또 다른 여러 컴포넌트의 조합으로 구성될 수 있다고 한다.

 

  또한 Component는 트리구조를 가진다.

  이 Component는 React의 핵심이라고 하는데 실무에서 대략 200여 개의 컴포넌트를 사용한다고 한다.

  기존의 JQuery로 웹을 제작할 시에는 동일한 것을 다시 만들어야 하는 상황이 생겼으나,

  Component는 독립적인 재사용이 가능하므로 더 효율적이다.

 

  Component는 React 공식 문서에도  쪼개면 쪼갤수록 즉, 더 세세하게 만들수록 좋다고 하는데

  이때 나온 개념이 '아토믹 디자인 패턴(Atomic Design Pattern)'이다.

 

Atomic Design Pattern

  아토믹 디자인 패턴의 개념은 최소단위까지 컴포넌트로 나누고 이를 모아서 하나의 페이지를 만든다는 개념이다.

  개념적으로는 가능하지만 어디까지 쪼개야 하는 건지에 대해서는 의문이 있다.

 

 

2.React 설치(MAC)

 React 프로젝트 생성 시에는 Node.js 설치가 필요하다.

 프로젝트 개발 시 필요한 주요 도구들이 Node.js를 사용하기 때문이다.

 Node.js 설치 후 패키지 매니저 도구인 npm을 설치한다.

 Node.js 및 npm 설치 방법은 아래를 포스팅을 참고하면 된다.

 2023.03.17 - [백앤드/Node.js] - [포스코 x코딩온] 웹개발자 입문 과정 3주 차 회고-04 | 백앤드 기초

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-04 | 백앤드 기초

 

 이후 설치는 터미널을 켜고 원하는 경로에 아래와 같이 작성한다.

 

cd /Users/ 
ls #[유저이름] 확인 
sudo chown -R 501:20 "/Users/[유저이름]/.npm"
npx create-react-app [프로젝트 이름]

#예시
#sudo chown -R 501:20 "/Users/jayoung/.npm"
#npx create-react-app 01_react

 sudo chown -R 501:20 ~ 으로 권한 변경을 하지 않으면 권한 문제가 계속 발생하고

 파일을 못 지운다.. ㅜㅜ

 

 에러 내용 :

 - Failed to delete using the Trash. Do you want to permanently delete instead?

 - Error: EACCES: permission denied, unlink '/Users/jayoung/code/react-basic/src/reportWebVitals.js'

 

설치를 하면 다음과 같이 프로젝트가 생성되는데 src 폴더에서 

index.js, App.js를 제외하고는 필요 없으니 삭제해서 사용했다.

생성된 React 프로젝트