리액트를 시작할 때 꼭 알아야 하는 것과 작업환경 설정

추후에 프론트엔드 면접 질문 중 '어떤 프레임워크를 사용하여 개발했는지',

'왜 그 프레임워크를 사용했는지'에 관한 질문에 대답하기 위해 해당 글을 작성한다.

---

React는 무엇인가?

웹 개발이 복잡해짐에 따라 html, css, js만으로는 개발에 한계가 생겼으며,

초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게 해주는 jQuery 라이브러리가 주로 사용되었다. 하지만 jQuery의 DOM을 직접 조작하는 방식에 한계가 생김

 

대규모 프로젝트에 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크(or 라이브러리)가 등장

대표적인 프레임워크&라이브러리 → Angular, React, Vue

 

나는 그 중에 리액트에 대해 학습을 진행할 것이다.

 

리액트(React) = Facebook(현재 Meta)에서 만든 Javascript 사용자 인터페이스(UI) 라이브러리

 

React의 특징

• 사용자 인터페이스(UI) 개발에 초점을 맞춘 라이브러리
• 프레임워크와 달리 오직 V(view)만 신경쓰는 라이브러리
• 브라우저가 관리하는 실제 DOM이 아닌 가상 DOM을 사용하여 UI 업데이트를 처리
  • 이를 통해 최소한의 DOM 조작이 가능하여 신속한 UI 업데이트를 가능하게 하고, 성능을 최적화 시킴
  • UI를 자동으로 업데이트 해주기 때문에 UI를 빠르게 업데이트할 수 있음
• 컴포넌트 기반 아키텍처를 기반으로 하여 재사용성과 유지보수성을 높일 수 있도록 도와줌
  • 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어 가는 구조를 의미
  • 구성하는 UI 요소를 컴포넌트로 분리하여 개발하고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 구성 가능

• 데이터의 흐름을 단방향으로 유지함
  • 단방향 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트
  • 반면에 뷰와 앵귤러는 양방향 데이터 바인딩을 하여 데이터의 변경과 UI 요소의 상태 변경이 서로 영향을 주어 동시에 업데이트
  • 양방향 바인딩은 UI가 복잡해지면 성능이 저하되지만, 단방향 바인딩은 성능 저하 없이 DOM을 렌더링 시켜줌

리액트는 프레임워크가 아닌 라이브러리라던데... 

왜냐하면,

프레임워크는 특정 프로그램을 만들기 위해 여러 요소와 규칙을 제공하는 프로그램으로

개발자는 프레임워크가 제공하는 규칙과 인터페이스에 따라 코드를 작성해야 함

대표적인 예로는 Angular, Vue 등

 

라이브러리는 소프트웨어를 개발할 때 도움이 되는 기능들을 모듈화하여 제공해주는 도구이며

프레임워크와는 달리 개발자가 코드의 흐름과 제어를 직접 관리

대표적인 예로는 jQuery, React 등

---

리액트에 대한 기본적인 상식을 알았으니, 작업 환경 설정을 하면서 직접 실습을 진행해보자

 

작업 환경 설정

Node.js

• 브라우저 환경이 아닌 곳에서도 javascript를 실행할 수 있게 해주는 javascript 런타임(프로그래밍 언어가 구동되는 환경)

Npm

• Node.js 패키지 매니저 도구
• 다른 개발자가 만든 패키지를 설치하고 설치한 패키지의 버전을 관리할 수 있음
• 장점 → npm은 배포가 쉽고 의존성 문제를 쉽게 해결할 수 있음
• 단점 → 패키지가 중복으로 설치될 수 있음

설치(Windows 환경)

1. Node.js 공식 내려받기 페이지에서 Windows Installer를 내려받아 설치합니다.
2. 설치가 끝나면 터미널 창을 열고, 다음 명령어를 입력하여 제대로 설치했는지 확인합니다.
$ node -v

 

설치(macOS/Ubuntu)

// macOS와 Ubuntu에서는 Node.js를 여러 버전으로 설치하여 관리해 주는 nvm 도구를 권장합니다!
// 추후 Node.js의 버전이 바뀔 때 업데이트 하기 쉽고 다운그레이드하는 것 또한 쉽습니다.

1. 먼저 터미널을 열고 다음 명령어를 입력하세요
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
2. 터미널을 재시작하고, 다음 명령어를 입력하여 nvm을 잘 설치했는지 확인하세요
$ nvm --version
3. nvm 설치가 끝난 후 터미널 종료 후 다시 열어 다음 명령어를 입력하여 Node.js LTS 버전을 설치하세요.
$ nvm install --lts
4. 위 방법으로 했지만 nvm의 버전이 나타나지 않는다면 vim 명령어를 입력하여 ~/.bash_profile 파일에 다음 스크립트를 추가해야 합니다.
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

 

yarn 설치

• yarn은 페이스북에서 만든 자바스크립트 패키지 매니저로 npm으로 별도 설치해야 함
• yarn은 npm과 같은 기능을 수행하지만, npm 레지스트리와 호환되면서 속도나 안정성 측면에서 npm을 개선한 도구
• npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공

설치(공통)

1. npm의 글로벌 설치 기능을 통해 설치할 수 있습니다.
$ npm install --global yarn
2. 터미널을 다시 열고 다음 명령어로 설치를 잘 했는지 확인해 주세요!
$ yarn --version

 

create-react-app으로 프로젝트 생성하기

본격적으로 리액트 프로젝트를 만들어보자

$ yarn create react-app hello-react

//yarn create react-app <프로젝트 이름>
//yarn을 사용하지 않는 경우, $npm init react-app <프로젝트 이름>

프로젝트 생성을 완료했다면 터미널에 아래의 명령어를 작성

$ cd hello-react
// cd <프로젝트 이름>
$ yarn start 
// 또는 npm start

 

 

localhost: 3000 포트로 실행되는 리액트 프로젝트를 확인!

---

그래서, 왜 리액트를 쓰는가?

다른 사이트의 글을 참고하자면,

 

1. 완성도 높고 이해하기 쉬운 개발 워크플로우

JSX를 JavaScript에 넣음으로써(말 그대로 거꾸로) 훨씬 간결하고 가독성이 뛰어나며 포괄적인 코드를 제공

 

2. 뛰어난 유연성과 호환성

한번 익힌 기술을 다양한 플랫폼에서 쉽게 재사용할 수 있기 때문

 

3. 손쉬운 컴포넌트 재사용성

 

4. Virtual DOM으로 한층 강화된 고성능

DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 즉시 반영하여 놀라운 속도의 렌더링을 제공

 

5. Flux와 Redux의 힘

Flux는 편리한 UI 디자인 워크플로우를 위해 프론트엔드에서 사용되는 아키텍처 패턴

Redux는 모든 앱 데이터를 처리할 수 있는 단일 store 객체를 제공하여 기본 데이터 관리 조작을 간편하고 편리하게 만들어 줌

 

6. 다양한 툴 제공

React 개발자 도구는 매우 편리한 기능이 제공

 

7. React Native의 강력한 기능

적절한 네이티브 성능과 시스템 관리를 수행

 

8. 시장에 영향을 미치는 거대한 커뮤니티와 리소스

GitHub에서 상위 5개 리포지토리 중 하나이며, 대규모 커뮤니티의 지원을 받고 있음

 

9. HTML 확장을 위한 JSX 구문

개발자는 브라우저의 트리 구조에 HTML과 React.js 컴포넌트를 전달하여 유지보수가 쉬운 깔끔한 코드를 구축 가능

 

10. React Hook

Hook을 사용하여 컴포넌트 간의 state 로직을 간단하게 관리할 수 있고, 비슷한 로직들을 하나의 컴포넌트로 그룹화할 수 있으며, props나 class가 없는 컴포넌트 간에 데이터를 전송 가능

 

등의 이유가 있다.

 

난 그 중 리액트가 '라이브러리'이기 때문이라고 생각한다.

자유도가 높아짐에 따라 활용도도 높아지는 법이라고, 그만큼 사람들이 '개발'을 더욱 열심히 할 수 있게 도와주는 도구가 아닐까 라는 생각이 들었다.