React 정리

개발을 하다보면, 사용중인 라이브러리나 프레임워크의 장점을 이해하고 그에 맞게 코드를 작성하는 게 중요하다고 느껴질 때가 있었다.

라이브러리를 사용한 이유가 명확하지 않으면 오히려 프로젝트의 최적화를 망칠 수 있다는 생각이 들었기 때문이다.

따라서 초심으로 돌아가 가장 기본적인 React에 대해서 다시 공부하고 정리하였다.

React는 메타(구 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리로, 프론트엔트 개발에서 현재 지배적인 위치를 가지고 있다.
사용자 인터페이스 개발을 컴포넌트 단위로 하여 생산성을 높일 수 있다.
독립적으로 개발된 컴포넌트들이 합쳐져 하나의 페이지를 구성할 수 있도록 리액트는 설계되었다.

🍓 리액트의 세 가지 특징

1. 선언형 프로그래밍 (Declarative)

• 리액트는 한 페이지를 보여주기 위해서 HTML, JS, CSS를 나누어 작성하기 보다는 JSX를 사용하여 JSX와 CSS로 페이지를 구성한다.
• 리액트는 적절하게 사용된 상태값이 변경되어 렌더링될 때 올바른 컴포넌트만 다시 렌더링한다.
• 작성된 JSX를 보고 각 컴포넌트의 기능과 웹의 구성을 짐작할 수 있고 코드가 더 간단하다. 때문에 디버깅하기도 쉽다.

2. 컴포넌트 기반 개발 (Component-Based)

• 리액트는 컴포넌트 기반으로 개발을 하는데, 하나의 기능을 위해서 여러 종류의 코드를 묶어 놓은 것을 컴포넌트라고 한다.
• 컴포넌트는 독립적이고 재사용하기 쉽다.
• 만약 UI의 구성을 재배치 한다고 생각했을 때, 컴포넌트를 사용하지 않았다면, HTML과 JS 모두 다시 작성해야 할지도 모른다.
• 컴포넌트로 분리되면 유지와 보수, 유닛 테스트에 용이하다.
• 상기 장점들로 기능 작동 개발에 집중할 수 있게 해준다.

• application은 컴포넌트들의 조합이다.
• 컴포넌트는 클래스 혹은 함수 형태로 작성될 수 있으며, 최신 리액트 버전에서는 함수형 컴포넌트가 권장된다.
• 컴포넌트끼리의 관계는 트리구조로 형상화 할 수 있으며, 이를 통해서 UI 구조를 용이하게 변경할 수 있다.

• 클래스형 컴포넌트가 함수형 컴포넌트보다 메모리 자원을 더 잘 관리/사용한다.
• 클래스형 컴포넌트에서는 this 키워드를 사용해야 한다.
• 클래스형 컴포넌트는 클래스에는 Life Cycle이 존재하기에 디테일한 코딩을 하고자 한다면 class를 사용한다.
• 다만, 함수형 컴포넌트가 훅을 통한 쉽고 간편한 코딩이 가능하다.
• 함수형 컴포넌트와 클래스형 컴포넌트의 가장 큰 차이는 Hooks라는 리액트 코어 라이브러리의 사용 유무이다.

3. 범용성 (Learn Once, Write Anywhere)

• 리액트는 메타에서 개발했기에 안정적이고 매우 유명하다.
• 자바스크립트 프로젝트라면, 어디에든 유용하게 사용될 수 있다. 기존 프로젝트에 유연하게 적용이 가능하다.
• React Native및 expo로 크로스플랫폼 모바일 앱의 개발도 가능하다.
• 또한, electron 및 tauri로 멀티 플랫폼 데스크탑 앱의 개발이 가능하다.

JSX 문법

• 자바스크립트를 확장한 문법으로, 자바스크립트 내부에 HTML과 유사한 마크업을 작성할 수 있다. 이를 통해서 코드를 더 이해하기 쉽게 작성할 수 있다.
• JSX는 Babel에 의해서 JS로 변환된다.
• 리액트를 사용하기 위해서 JSX가 필수적인 것은 아니다.
• JSX는 javascript의 모든 기능을 포함한다.
• JSX는 XSS(Cross Site Scripting) 공격을 방지할 수 있다.
• JSX는 HTML 방식을 그대로 사용이 가능하다. (컴포넌트와 혼용이 가능하다)

JSX 문법의 규칙

1. 하나의 요소안에 모든 요소가 포함되어야 한다.
2. class 대신에 className을 사용해야 한다.
3. 자바스크립트를 표현할 때 {}를 통해 코드를 감싸야 한다.
4. 사용자 정의 컴포넌트는 대문자로 시작한다.
5. 조건부 렌더링에는 삼항연산자 ? 를 사용한다.
6. JSX에서 여러개의 HTML 요소를 표현할 때는 map을 이용해 처리한다. 
   🥟 이 경우 key 라는 JSX 속성값을 무조건 지정해야 한다.
   🥟 key는 변하지 않고 예상가능하며 유일해야 하므로 id값을 사용하고 만약 적당한 값이 없을 경우 배열의 index를 key값으로 지정한다.
   🥟 key값은 리액트가 배열 내부의 값이 추가/제거 된 것을 식별하는데 도움을 준다.

공식문서에서 JSX에 대한 가이드를 확인할 수 있다.

Create-React-App (CRA)

CRA(Create React App)는 프로젝트 초기화 도구이다. 

CRA를 통해서 간편하게 리액트 개발 환경을 구성, 설정할 수 있다.

• 리액트 프로젝트를 생성하기 위해서는 node.js, npm(yarn), npx가 설치되어 있어야 한다.

npx create-react-app <application 이름>
or
yarn create react-app <application 이름>

위 명령어를 통해서 간단하게 React가 사용된 프로젝트를 구성할 수 있다.

 

🍉 프로젝트 초기화 도구를 Boilerplate라고도 한다.
🍉 프레임워크, 템플릿, 라이브러리의 차이점

CRA는 리액트 내부의 코드 유출 위험이 있기에 sourcemap의 제거가 필요하다.
대규모 프로젝트에 사용하기에 CRA는 적합하지 않을 수 있다.

🥪 대신 Next.js 나 Gatsby와 같은 프레임워크를 사용하여 생산성을 높일 수 있다.

Graph QL : Graph QL은 쿼리 언어로 REST와는 달리 단 하나의 Endpoint만을 가진다. 
Graph QL은 채팅 기능 등에 사용될 수 있지만, REST보다 범용성이 아직 낮다.

 

또한, 여러 탬플릿을 사용하여 React 프로젝트를 생성할 수 있다.

예를 들면, redux 공식문서에서 소개하는 탬플릿으로 Redux가 미리 설정된 CRA 앱을 생성할 수 있다.

# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

Virtual DOM

React의 가장 큰 특징은 Virtual DOM의 사용이다.
🍓 기존의 자바스크립트를 이용한 DOM 업데이트는 느렸다.
🍓 많은 양의 DOM 조작에 비효율적인 업데이트가 문제가 되었기에 가상 돔이 등장하였다.

 

리액트의 대표적인 세 가지 특징: JSX, Component, Virtual DOM

🌽 Life Cycle : mounting / updating / state change / unmounting
🌽 focus -> mount -> unmounting -> blur
🌽 렌더링은 focus -> mount 과정에 일어난다.

Hooks

Hook은 리액트 코어 라이브러리로, 간단하게 리액트의 기능을 사용할 수 있는 함수들을 뜻한다.

Hook은 모두 use로 시작하는 이름을 가졌으며, 커스텀 훅을 만들 때에도 이 네이밍 규칙은 따라야 한다.

Hook은 조건부로 사용될 수 없고, Hook 내부나 React 컴포넌트 내부에서만 호출이 가능하다.

 

훅의 종류는 다음과 같다.

• 상태 데이터를 나타내기 위한 useState
• useReducer는 useState의 대체 함수이다.
• useLayoutEffect (비동기) / useEffect (동기, 모든 DOM이 변경 후에 동기적으로 발생한다)
• useContext를 통해서 컨텍스트를 생성하고 전역 상태 관리를 할 수 있다.
• useMemo, useCallback을 통해 각각 값과 함수의 렌더링 최적화가 가능하다.
• useRef는 태그가 하나만 가질 수 있는 속성이었던 id와 유사하다. ref를 통해 직접 DOM에 접근할 수 있게 해준다.

리액트는 주로 MVVM 패턴이다.
🍒 MVVM(Model-View-ViewModel)은 react, vue.js, angular 등에서 사용되는 sw 아키텍처 패턴이다.
controller는 store, state, dispatch와 관련이 있다.

 

React 공식 문서들

https://react.dev/

React

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://github.com/facebook/react

GitHub - facebook/react: The library for web and native user interfaces