왜 리액트를 사용할까?

웹 애플리케이션의 규모가 커지고 다양한 UI,UX를 구현하게 되면서 이전의 방법으로는 애플리케이션을 개발하고 유지보수하는 것이 어려워졌다. 규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지보수를 더욱 편리하기 위해 다양한 Frontend Framework(Library)가 등장하게 된 것이다.

Frontend Framework 3대장

Angular

2010년 구글에서 개발한 프레임워크, TypeScript 기반으로 매우 안정적이고 탄탄한 프론트엔드 앱 개발이 가능하며 다양한 기능이 내장되어있다. 무겁고 배우기 어렵다는 단점이 있다.

Vue

2014년 Evan You라는 개인이 개발한 프레임워크, 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼으나 성장 속도가 매우 빠르다.

React

지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하는 것을 목표로 2013년 Facebook에서 개발한 라이브러리. MVC(Model-View-Controller) Architecture인 Angular, Vue 와는 달리 리액트는 오직 View만 담당한다.

그만큼 내장된 기능이 부족해 third-party 라이브러리 (ex. React-router, Redux)를 함께 사용한다. 생태계가 활성화 되어 있으며 다양한 자료와 React Native의 사용으로 사용자가 꾸준히 증가하고 있다.

React 정의

페이스북에서 개발하고 관리하는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리. 리액트는 가상 돔(Virtual Dom)을 통해 UI를 자동으로 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술이다!

CRA(Create-React-App)

: 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)

리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많다. 전반적인 스스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다.

리액트 팀에서는 이러한 문제를 해결하기 위해 CRA(Create-React-App)을 만들었다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

CRA에는 바벨(compiler)과 웹팩(bundler)과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다. 이러한 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야한다. CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.

CRA 프로젝트 설치

jsx
// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react

// 3. westagram-react 프로젝트 진입
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

//5. 서버 끊기
콘솔창에서 Ctrl + C 

CRA 기본 폴더 및 파일 구성

CRA 초기 폴더 및 파일 세팅 구성

필요 없는 파일 및 주석 처리되어 있는 코드는 삭제한다.

node.modules - package.json - .gitignore

1) node.modules

• CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2) package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재
• "dependencies"
  • 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
  • 실제 코드는 node.modules 폴더에 존재
  • node.modules 와 package.json 에서 이중으로 패키지를 관리하는 이유
    협업시 github에 불필요한 node.modules는 올리지 않는다. 다른 사람이 pull 받아서 npm install만 하면 package.json에 기록되어있는 패키지를 버전에 맞게 자동으로 설치한다.
• "scripts"
  • run : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어. npm run start.
  • build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.

3) .gitignore

• .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
• push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.

index.html - index.js - App.js

1) public - index.html

• <div id="root"></div>

2) src - index.js

• React의 시작 (Entry Point)
• ReactDOM.render( <App /> , document.getElementById('root'))
  - ReactDOM.render 함수의 인자는 두 개
  - 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
  - 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
  - (이름 함부로 수정하면 안 됨)

3) src - App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트
• Westagram 작업 시 <Login /> 컴포넌트, <Main /> 컴포넌트를 그 자리에 대체하여 작업하면 된다.
• React Router 를 배운 후에는 <Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.

기타 폴더 구성

1) public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리 (추후 세션을 통해 다룰 예정)

2) src 폴더

• components - 공통 컴포넌트 관리
• pages - 페이지 단위의 컴포넌트 폴더로 구성
  • Login - Login.js, Login.scss
  • Main- Main.js, Main.scss
• styles 폴더
  • reset.scss - css 초기화
  • commom.scss - 공통으로 사용하는 css 속성 정의 (ex. font-family, theme color)
• 참고) components vs. pages
  • 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리합니다.
    (ex. Header, Nav, Footer)
  • 페이지 컴포넌트의 경우 pages 폴더에서 관리합니다.
  • 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 컴포넌트 폴더 하위에서 관리합니다.