2022.05.22 Day 12 - React

성민규·2022년 5월 22일

Web Application의 발전

UI(User Interface)와 UX(User Experience)가 많아지면서
웹 페이지라는 단어보다 웹 애플리케이션이라는 단어가 많이 사용됩니다.

이처럼 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌습니다.

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 되었습니다.

Frontend Framework(Library)

Angular
2010년 Google에서 개발한 Framework.
TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능하며 Framework답게 다양한 기능이 내장되어있습니다.
무겁고 배우기 어렵다는 단점이 있습니다.

Vue
2014년 Evan You라는 개인이 개발한 Framework.
코드가 깔금하고 배우기 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠릅니다.

React
"지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것"을 목표로 2013년 Facebook에서 개발한 Library.
MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오직 View만 담당합니다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용합니다.
페이스북의 지속적인 관리와 함께 생태계가 활성화되어 있으며 다양한 자료, 그리고 React Native의 사용으로 인해 사용자가 꾸준히 증가 중입니다.

React 정의

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점입니다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트합니다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술입니다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아집니다.

Node.js & npm

Node.js는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미합니다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 합니다. Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는 노드(Node.js)가 설치되어 있어야 합니다.

npm
Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요합니다. npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있습니다.

CRA(Create-React-App)

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

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

Component

재활용 가능한 UI 구성 단위
컴포넌트의 특징

재활용하여 사용할 수 있다.

코드 유지보수에 좋다

해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.

컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.(부모 컴포넌트 - 자식 컴포넌트)

클래스형 컴포넌트(class component), 함수형 컴포넌트(functional component)

클래스형 컴포넌트(class component)

import React from 'react'

class Component extends React.Component {
  state = {
  	// ...
  };
  render() {
    return (
			<div>
				// ...
			</div>
	)
  }
}

export default Component
클래스형 컴포넌트에서는 위와 같이 render함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.


함수형 컴포넌트(functional component)

import React from 'react'

function Component(){
  return (
			<div>
				// ...
			</div>
		)
};

export default Component
함수형 컴포넌트는 클래스형 컴포넌트에 비해서 훨씬 간단하고 단순하지만 state를 관리하지 못한다는 단점으로 잘 사용되지 않았습니다.

하지만 React 16.8 버전에서 Hook 기능이 추가되면서 함수형 컴포넌트에서도 state를 사용할 수 있게 되었고, 그 후부터 클래스형 컴포넌트보다는 함수형 컴포넌트를 더 많이 사용하기 시작했습니다.

JSX

JavaScript Syntax Extension

JSX란 리액트에서 사용하는 자바스크립트 확장 문법입니다.
JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.


JSX 장점


HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙합니다.
HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있습니다.


JSX 특징


자바스크립트로 표현하기 위해서는 {}안에 javascript를 작성해야 합니다.
자바스크립트에서는 class지만 JSX에서는 className으로 사용합니다.
Inline Styling
Self Closing tag
모든 요소를 감싸는 최상위 요소

JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다고 배웠습니다.

Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능입니다.

요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용됩니다.


📖 참고자료

JUST CODE