React

React

Meta(FaceBook)에서 개발한 JavaScript 기반 UI 개발 라이브러리

React는 페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 사용자 인터페이스의 구축과 관리를 도와주는 선언적이고 효율적인 방법을 제공합니다. React는 단일 페이지 애플리케이션(SPA) 및 모바일 애플리케이션에서 특히 뛰어난 성능을 보이며, 컴포넌트 기반 아키텍처를 기반으로 하고 있습니다.

React는 2011년에 페이스북에서 처음으로 도입되었고, 2013년에 오픈소스로 공개되었습니다. 그 이후로도 React 커뮤니티는 계속 성장하고 발전하며, 많은 개발자들이 이 라이브러리를 사용하여 현대적이고 효율적인 웹 애플리케이션을 구축하고 있습니다.

React 창시자

React 핵심 개념

React 시작하기

React 프로젝트를 시작하는 방법

CDN 으로 시작하기

Node.js 와 npm 으로 시작하기

CDN 으로 시작하기

개발용 CDN script

배포용 CDN script

React 시작하기

ES7+ React/Redux/React-Native snippets

"ES7+ React/Redux/React-Native snippets"는 Visual Studio Code에서 React 및 Redux 개발을 더 효율적으로 하기 위한 코드 스니펫을 제공하는 확장입니다. 이를 설치하려면 다음 단계를 따르세요.

Visual Studio Code 열기:

React Extension

Vite

Vite는 주로 Vue.js 애플리케이션을 위한 개발 환경을 제공하는데 중점을 두고 있으나, 다른 프레임워크 및 라이브러리에도 적용할 수 있습니다.

Vite, 차세대 프런트엔드 개발 툴

https://ko.vitejs.dev/

장점

1.

빠른 개발 서버:

2.

ES 모듈 기반 개발:

3.

Hot 모듈 교체 (HMR):

Vite & React

JSX

JavaScript + (XML/HTML)

React에서 사용되는 자바스크립트의 확장 문법으로, XML 또는 HTML과 유사한 구조를 가지고 있습니다. JSX를 사용하면 React 요소를 좀 더 간편하게 작성할 수 있습니다. 이는 React에서 UI를 표현하는 데에 주로 사용되며, 자바스크립트 코드 내에 마크업을 작성할 수 있게 해줍니다.

동작

JSX 문법으로 작성하는 코드는 React 의 createElement 함수를 사용하는 JavaScript 코드로 변환됩니다.

JSX JavaScript 로 변환 React 엘리먼트를 생성 가상 DOM 실제 DOM

엘리먼트 (Element)

브라우저에 컨텐츠를 표현하는 하나의 단위

엘리먼트는 React에서 컴포넌트가 실제로 브라우저에 나타내는 내용을 표현하는 단위입니다. React에서 엘리먼트는 사용자 인터페이스를 나타내기 위해 사용되며, 각 엘리먼트는 가상 DOM (Virtual DOM)에서 컴포넌트의 인스턴스에 대응합니다.

JSX에서는 모든 엘리먼트에 대해 종료 태그를 명시적으로 작성해야 합니다.

(HTML에서는 몇몇 태그에서 닫는 태그가 생략되어도 유효합니다.)

HTML 인 경우 OK

React 인 경우 ERROR

Component

React 의 재사용 가능한 UI 요소

컴포넌트는 재사용 가능한 UI 조각으로, 독립적이며 특정 기능을 수행하는 데 사용됩니다. React 애플리케이션은 컴포넌트의 조합으로 구성되며, 각 컴포넌트는 자체적으로 상태를 가질 수 있습니다. 이러한 모듈화된 구조는 애플리케이션을 보다 효율적으로 관리하고 유지보수하기 쉽게 만듭니다.

컴포넌트 이해하기

State (상태)

컴포넌트가 관리하는 로컬(내부) 데이터

React 컴포넌트의 상태(State)는 컴포넌트가 관리하는 로컬 데이터입니다. 상태를 사용하면 컴포넌트가 동적인 데이터를 저장하고 표시할 수 있으며, 상태가 변경될 때마다 React는 자동으로 화면을 다시 렌더링합니다.

State 의 특징

상태 초기화
: 컴포넌트가 생성될 때 useState 훅이나 클래스 컴포넌트의 constructor 메서드에서 초기 상태를 설정합니다.

상태 업데이트
: setCount나 this.setState를 사용하여 상태를 업데이트합니다. 이때 이전 상태를 참조하여 변경을 진행하는 것이 중요합니다.

컴포넌트별로 고유한 상태
: 각각의 인스턴스는 자체 상태를 유지하므로, 동일한 컴포넌트의 여러 인스턴스 간에는 각각 독립적인 상태가 존재합니다.

Props (속성)

부모 컴포넌트에서 자식 컴포넌트로 전달하기 위한 데이터 properties 의 줄임말

외부에서 전달되는 매개변수. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

이것이 React 컴포넌트 간에 정보를 주고받는 주요 메커니즘 중 하나입니다. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 데이터를 전달하고, 자식 컴포넌트는 이를 활용하여 화면에 정보를 표시하거나 특정 동작을 수행할 수 있습니다.

React에서는 props를 통한 단방향 데이터 전달이 주요한 패턴입니다.

단, 상태 관리 라이브러리인 Redux, Context API 등을 사용하면 컴포넌트 간의 데이터 흐름을 조금 더 유연하게 관리할 수 있습니다.

자식 컴포넌트에서 부모 컴포넌트로 데이터를 넘기는 법 - 부모 컴포넌트에서 props 로 함수를 내려주고, 자식 컴포넌트에서 그 함수를 호출하면서 부모 컴포넌트로 데이터를 전달 할 수 있습니다.

Hook

Hook ( 갈고리 ) : 뾰족하고 구부러진 날로 다른 물체에 걸어 연결하는 도구

갈고리는 물건을 잡거나 걸기 위해 사용하는 도구입니다. hook은 리액트 컴포넌트에서 상태나 라이프사이클을 잡거나 걸어서 사용할 수 있는 도구라는 의미에서 유래되었습니다.

컴포넌트에서 상태와 라이프사이클 관리를 위한 함수형 프로그래밍 방식을 제공하는 API

리액트 16.8 버전부터 도입

hook 종류

상태 관리용 hook

라이프사이클 관리용 hook

Router

React 애플리케이션의 URL을 관리하는 라이브러리

정의

React 라우터는 React 애플리케이션 내에서 페이지 간의 네비게이션을 관리하는 라이브러리입니다. 주로 싱글 페이지 애플리케이션(Single Page Application, SPA)에서 사용되며, URL을 기반으로 다양한 컴포넌트를 렌더링하여 사용자 경험을 향상시킵니다.

Router 를 사용하면 URL을 기반으로 애플리케이션의 렌더링을 제어할 수 있습니다.

React Style

React 에서 스타일링하는 방법을 알아봅니다.

React 에서 스타일링 하는 방법

BootStrap

React-BootStrap

Context

모든 컴포넌트에서 공유할 수 있는 상태를 저장하는 방법

Context 의 필요성

Context 는 모든 컴포넌트에서 상태를 공유하기 위해 필요합니다. - 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달해야하는 경우 - 컴포넌트 2계층 이상으로 데이터를 전달해야하는 경우

상태를 관리하다 보면 부모 컴포넌트에서 자식 컴포넌트 단방향으로만 데이터를 전달하는 경우 외에도 자식에서 부모로, 또는 컴포넌트 여러 계층을 넘어 데이터를 전달해야하는 경우가 있습니다.

이를 구현하기 위해서는, Global State 를 사용할 수 있습니다.

그러나 이러한 방법은 다음과 같은 단점이 있습니다.

Redux

Redux 란?

Redux 이해하기

Redux 기본 원리

Redux 구성 요소

Redux 동작 과정

Redux 관련 라이브러리

예시 코드