[React] React.js란?

구름톤 유니브☁️ 4기 FE 스터디

서론

프론트엔드 개발을 시작하게 된다면 꼭 들어보고 사용하게 될텐데

정작 리액트가 뭐냐고 물어봤을 때 대답하기가 어렵곤 했습니다 (ㄱㅡ)...

따라서 이번 포스팅에서는 React에 대한 간단한 소개를 하고자 합니다!

---

본론

React.js

1. React란?

리액트는 JavaScript UI 라이브러리. 쉽게 말해, 사용자 인터페이스(UI)를 효율적이고 빠르게 만들 수 있게 도와주는 도구라고 볼 수 있다.

 

리액트 외에도 Angular JS, Vue JS와 같은 Java Script UI 프레임워크가 존재한다.

프레임워크? 라이브러리?

사실 리액트를 사용하면서도 은근 자주 헷갈려했던 부분인데, 리액트는 프레임워크가 아닌 라이브러리라는 점이었다.

그럼 프레임워크와 라이브러리는 어떻게 다른걸까? 이는 App의 흐름의 제어권한이 누구에게 있냐의 차이로 볼 수 있다.

• 프레임워크: 흐름의 제어권한을 프레임워크가 가지고 있다.
• 라이브러리: 흐름의 제어권한이 개발자에게 있다. 즉, 개발자가 라이브러리의 코드를 호출하여 사용한다고 볼 수 있음.

---

2. React의 장점

- Virtual Dom을 통한 빠른 렌더링

DOM? Virtual DOM?

DOM(Document Object Model)은 HTML 문서를 계층 형태로 표현한 인터페이스이다.

즉, DOM은 웹사이트의 정보를 모두 담고있는 객체이고, 화면이 업데이트되는 것은 곧 DOM이 수정됨을 의미한다.

 

그런데 문제점은 이러한 브라우저 DOM을 수정하는 작업은 비용이 많이 드는 무거운 작업이라는 것이다.

 

따라서 리액트에서는 Virtual DOM을 사용함으로써 State가 변경되었을 때 이 변경된 부분에 대해서만 업데이트를 수행하기 때문에 빠른 렌더링이 가능해지는 것이다.

 

- Components-Based (컴포넌트 기반)

리액트의 또 다른 장점은 컴포넌트 기반으로 개발이 진행된다는 점이다.

마치 레고 블럭을 조립하듯 리액트에서는 각 컴포넌트들을 조합하여 웹 사이트를 개발하는 것이다.

 

예를 들어, 하나의 웹페이지를 '헤더', '네비게이션 바', '게시글 목록', '댓글창'처럼 각각의 독립된 컴포넌트로 나눌 수 있고, 이걸 조립하듯이 붙여서 하나의 화면을 만든다.

이러한 컴포넌트 기반 방식이 가지는 장점은 다음과 같다.

• 재사용성: 각각의 독립된 컴포넌트들을 여러 곳에서 재사용할 수 있다.
• 유지보수 용이: 변경 사항이 생기더라도 해당 컴포넌트만 수정하면 되므로, 유지보수가 용이하다.

- 활발한 커뮤니티와 생태

리액트는 Meta에서 진행 중인 오픈소스 프로젝트인만큼, 지속적인 업데이트와 풍부한 생태계를 갖고 있다.

• 문서화가 잘 되어있으며
• StackOverFlow나 Github에서 활발한 지식 공유가 이루어지고 있으며
• React Native를 통해 Java Script만으로 웹과 모바일 서비스를 모두 개발할 수도 있다.

- 단점 역시 존재하는데...

• 배워야 할 개념이 많음 (JSX, Props, State, Hook, Routing, 상태관리 등등...)
• 상태 관리를 하려면 Recoil, Redux 같은 추가 도구가 필요함
• 업데이트가 잦은 만큼 학습량이 늘어나는 경향이 있다

하지만 이건 프론트엔드 개발 분야가 워낙 트렌드에 민감한 분야라 어쩔 수 없는 운명이기도 하다...🥲

---

3. 리액트 시작하기

- 직접 리액트를 연동하는 방법

1. 기존 HTML 코드에 DOM Container (root DOM node)를 추가한다. 이는 Virtual DOM의 시작점이라고 이해

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

2. 리액트 JS 파일들을 가져온다.

    <!-- 리액트 가져오기 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- 리액트 컴포넌트 가져오기 -->
    <script src="MyButton.js"></script>

 

- create-react-app

1. Node.js와 npm 환경 설정

• Node.js v14.0.0 이상
• npm v6.14.0 이상
• VS Code 설치

2. npx 명령어를 이용해 실행

npx create-react-app <프로젝트 이름>

패키지를 정해진 위치에 설치하고 찾아서 사용하는 같은 번거로운 작업을 편리하게 수행해준다.

---

마무리

리액트를 처음 접하면 생소하고 어려운 개념들이 많을 수 있지만, 그만큼 매력도 많은 라이브러리입니다.

이번 글에서는 React의 개요에 대해 다뤘고, 다음 포스팅에서는 JSX나 Props, State 같은 더 구체적인 리액트 개념을 하나씩 알아볼 예정입니다!

 

읽어주셔서 감사합니다 🫡