What is React?

Study·2021년 8월 4일

React

목록 보기

1/2

React란?

A library for creating user interfaces
Renders UI and responds to events

페이스북 사에서 만든 자바스크립트
페이스북에서 자체적으로 이용하고 있을 뿐만 아니라, Airbnb, Uber, Netfilx, Instagram
우리가 알고 있는 대체적인 웹 어플리케이션은 리액트로 만들어졌다고 해도 과언이 아님.

사용자에게 보여지는 UI를 만들고,
그 위에서 사용자가 클릭을 하거나 이벤트가 발생하게 되면 그 이벤트에 맞게 반응하도록 만들어진 라이브러리

조금 복잡한 웹어플리케이션을 만들 때, MVC 패턴을 많이 이용하고 있음.

MVC 패턴: Model, View, Controller로 나눠서 코딩해나갈 수 있는 것.

React는 View역할을 담당한다.

💡 User Interface를 만들 수 있게 도와주는 라이브러리
💡 사용자에게 UI를 보여주고 이벤트를 처리하는 일

Frameworks vs Libraries

프레임워크는 완성된 상태의 집이 있으면, 우리가 할 수 있는 것은 벽돌의 색을 바꿔서 붙이거나, 집 안의 가구를 재배치하는 느낌

라이브러리는 우리가 원하는 재료들을 골라서 벽돌, 도구, 나무 판자 등을 가지고 우리가 원하는 대로 집을 짓는 것을 말함. 그래서 조금 조금의 만들어진 부품 하나들 = 라이브러리

🏡 Frameworks 예시

대표적인 프레임워크: Angular.js
앵귤러는 UI 뿐만 아니라 라우팅, 스테이트를 관리할 수 있는 방식.
HTTP clients 등 다양한 기능들이 한번에 묶어져서 제공이 된다.

Angular를 사용해서 웹 어플리케이션을 만들려면 Angular에서 제공하는 기능을 이용해서 만든다.

정해진 골격 안에서 우리가 원하는 기능을 구현하는 것

🧱 Libraries

UI를 관리하는 라이브러리
라우팅을 관리하는 라이브러리
스테이트를 관리할 수 있는 라이브러리
대표적인 라이브러리: React

작은 단위, 작은 도메인 안에서 자신들이 원하는 작은 부분을 구현하는 것

따로 정해진 골격이 없기 때문에, 필요한 기능에 따라서 라이브러리를 골라서 사용할 수 있음

Angular.js

배우는데 시간이 오래걸림
Angluar1 Angular2 호환되지 않음
No Breaking Changes!

React

배우는 시간이 상대적으로 짧다.
반대로 리액트는 버전이 업데이트 되어도 호환이 잘 되도록 안정성있게 업데이트 됨
UI를 정말 쉽고 재밌게 만들 수 있도록 도와주는 라이브러리
페이스북에서 만들어져 강력한 커뮤니티가 형성이 되어져 있기 때문에, 문서화가 굉장히 잘 되어있다.
개발하면서 맞닥뜨릴 수 있는 문제점이 있다면 다른사람들이 이미 커뮤니티 사이에서 해결했을 가능성이 굉장히 높다.
React (웹 어플리케이션)
React Native (모바일 어플리케이션)
React + Electron (데스크탑 어플리케이션)
Angular와 Vue와 비교했을 때, npm에서 다운로드 받은 숫자가 굉장히 높다.

Vue.js

Angular만큼 제공하는 기능들이 많이 없다. State 관리X, HTTP Client가 포함되어 있지 않음)
프레임워크와 라이브러리 중간 상태.

React concept

React = components
리액트는 컴포넌트로 이루어진 UI 라이브러리
리액트는 컴포넌트들 끼리 모여서 즉 컴포넌트로 이루어진 것!

Component

컴포넌트 = 한가지의 기능을 수행하는 UI 단위

isolated 서로 독립적이고
independent 잘 고립되어져 있으며
reusable 재사용이 가능한 것

각각의 리액트 어플리케이션은 꼭 하나의 컴포넌트로 이루어져 있음
Testability = Testing을 하기가 좋다! (Unit Test)

Root (최상위 컴포넌트)
- Navbar (logo/button01/button02)
- Content (Article01/Article02/Article03)

각각의 독립적인 컴포넌트를 서로 조립해서 만들어 놓은 것 = React Application

DOM Tree

사용자가 우리의 웹 페이지를 보기 위해서는 우리가 작성한 웹페이지가 DOM Tree로 변환됨

Document Object Model의 약자
브라우저가 이해할 수 있도록 우리가 작성한 HTML의 태그들이 DOM Tree로 변환이 되어서 브라우저에 표기됨

React

React도 DOM Tree와 마찬가지로 이런 컴포넌트도 트리 형식으로 만들어져 있다.

React는 UI를 만들 수 있는 라이브러리
이 React를 이용해서 Web Application을 만든다는 것은 우리가 Component 들을 만드는 것

재사용이 가능한 컴포넌트들을 모아서 우리가 원하는 웹 어플리케이션을 만들 수 있음
컴포넌트는 다른 컴포넌트와는 독립적으로 그 컴포넌트에 해당하는 로직과 그 컴포넌트에 해당하는 state(상태)가 들어있기 때문에 cohesive(응집적)하다 라고 말할 수 있음.
A highly cohesive building block for UIs loosely coupled with other components.
Component 단위로 나누는 것이 굉장히 중요함
너무 지나치게 작은 단위로 나눌 필요는 없다!
재사용이 가능하고, 독립적인 단위로 나누는 것이 중요하다.

리액트에서 제공하는 컴포넌트라는 클래스 상속해야함

import React from 'react';

// Component
class FollowButton extends Component {
  // state: Component에 들어있는 데이터를 나타내는 Object
  state = {
    	numberOfFollowers: 0,
    };
	// render 함수: 어떻게 사용자에게 표기될 건지, HTML과 약간 비슷 = JSX
	render() {
    	return <button>
          {this.state.numberOfFollowers}
        </button>;
    }
}

export default FollowButton;

state라는 object의 데이터가 변경이 되면, render함수가 자동적으로 다시 호출됨
변경된 state의 값이 화면에 나타날 수 있도록 render함수가 계속 반복적으로 호출된다.
컴포넌트 안에는 이 컴포넌트 안에 들어있는 데이터를 담고 있는 state object와 사용자에게 UI를 표기하는 render함수가 있다.
state가 변경이 되면 render함수가 다시 호출이 되면서 업데이트 된 내용이 사용자에게 표기가 되는 것.
제일 상위에 있는 루트 컴포넌트 안에 state가 변경이 되면 그 안에 들어있는 자식 요소인 Navbar와 Content의 render함수가 호출됨, 그 안에 있는 로고와 버튼, 아티클의 컴포넌트 render함수가 계속 호출됨! = 사용자에게는 업데이트된 내용이 보여지게 됨.

❓ 이렇게 state가 변경이 될 때마다 모든 render함수가 다시 호출이 되는 건 성능이 안좋은거 아닌지??
🔸 브라우저에 페이지가 표시되기 위해서는 돔 트리가 형성이 됨.
🔸 이와 마찬가지로 리액트도 리액트만의 Virtual DOM Tree가 있음.
🔸 가상의 DOM Tree로 리액트의 컴포넌트들이 메모리상에 보관이 되어져 있음.
🔸 즉, 바로 리액트에 모든 구조들이 돔트리에 업데이트 되는 것이 아님.
🔸 컴포넌트에 변동 사항이 생겨서 자식 컴포넌트에 render 함수가 호출이 되면 리액트는 이전의 Virtual Dom Tree와 비교해서 정말 실질적으로 어떤 부분이 업데이트 되어야 하는지 계산을 한 다음에 정말 필요한 부분만 돔트리에 업데이트함.

render함수가 많이 호출이 되어도, 실질적으로 보여지는 데이터가 변동되지 않으면 DOM Tree에는 전혀 영향을 주지 않는다. 그래서 render 함수가 많이 호출이 되어도 성능을 크게 걱정하지 않아도 됨.