🔮 React - 1. React 시작하기!

무언가를 배울 때는, 그것이 어디서 왔는지 파악하는 것이 중요하다.

- GiangStepDEV

---

 

Why React?

안정화 된지 얼마 안 된 리액트, 왜 이렇게 핫할까요?

모든 기술 트렌드는 그것이 나오게 된 배경을 거슬러 올라가면 알 수 있습니다.

 

한 때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청난 활약을 하고 있습니다.

 

복잡하고 거대한 애플리케이션을 만들기 위해서는 자바스크립트만으로 관리하기에는 복잡도가 매우 증가합니다.

이를 해결하기 위해 수많은 프레임워크가 등장하였으며, 이 프레임워크들은 주로 MVC와 MVVM 아키텍처를 사용합니다.

https://learn.microsoft.com/ko-kr/aspnet/core/mvc/overview?view=aspnetcore-7.0

JSON 객체 값을 사용해 뷰를 갱신하는 경우, 요소를 찾아 업데이트를 하는데 애플리케이션 규모가 커질 수록 상당히 복잡해지고 성능도 떨어지게 됩니다.

 

이 때 페이스북 개발팀은 이를 해결하기 위해 하나의 아이디어를 고안해 냈는데요!

 

"어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라

기존 뷰를 날리고 처음부터 새롭게 렌더링을 하면 어떨까?"

 

이렇게 하면 애플리케이션 구조가 매우 간단해지고, 코드 양도 확연히 줄어들게 됩니다.

더 이상 어떻게 변화를 줄지 신경 쓸 필요가 없고, 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 다라 새로 렌더링 합니다.

장/단점

• 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다.
  따라서, 오직 View만 신경 쓰는 라이브러리 입니다.
• 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 합니다.
• 컴포넌트는 재사용이 가능한 API로 수많은 기능들이 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 합니다.

장점

1. 가상 DOM(Virtual DOM) 기반으로 UI를 빠르게 업데이트 할 수 있습니다.
2. 컴포넌트 기반 아키텍처로 코드의 재사용성이 높아집니다.
3. 단방향 데이터 흐름을 강조하여 예측 가능한 상태 관리가 가능합니다.
4. JSX(JavaScript XML) 문법을 사용하여 자바스크립트와 HTML을 쉽게 조합할 수 있습니다.
5. 다양한 라이브러리와 프레임워크와 쉽게 연동이 가능합니다.

단점

1. 초기 학습이 어려움
2. 컴포넌트 기반 아키텍처로 개발시, 구조 설계에 시간이 많이 소요 됨
3. 복잡한 애플리케이션의 경우, 상태 관리 복잡해질 수 있음
4. 라이브러리이기 때문에 개발에 필요한 다른 기능(라우팅, 상태 관리 등)을 추가로 구현해야 함

초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 맨 처음 어떻게 보일지 정하는 초기 렌더링이 필요합니다.

리액트에서는 이를 위해 render() 함수가 있습니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Virtual DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것 입니다.

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.

 

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 때는 다음 세 가지 절차를 밟습니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 합니다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.

---

작업 환경 설정

Node.js

리액트 프로젝트를 만들 때는 Node.js를 반드시 설치해야 합니다.

$ brew install node

$ node -v

yarn

yarn은 npm을 대체할 수 있는 도구로 npm 보다 더 빠르며 효율적인 캐시 시스템과 기타 부가기능을 제공합니다.

$ sudo npm install -global yarn

$ yarn -version

VSCode 플러그인

• ESLint
• Reactjs Code Snippets
• Prettier-Code formatter

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

$ yarn create react-app 프로젝트명

프로젝트 실행

$ cd 프로젝트명

$ yarn start