20241203 REACT
React
| 정의
Facebook에서 개발한 JS 라이브러리.
웹 어플리케이션의 UI(User Interface)를 효율적으로 만들기 위해 사용됨.
React를 사용하면 웹 페이지의 복잡한 구조를 관리하기 쉽게 만들어 줌(모바일 앱 개발에도 사용:React Native)
HTML과 같은 구조를 JS 코드로 작성하게 하고,
화면을 업데이트하는 과정을 자동화해 주어 개발자의 생산성을 크게 향상시킬 수 있음.
| 주요 개념
1. 상태
컴포넌트 내부에서 관리되는 데이터로, UI의 동적 변화를 반영하는데 사용.
상태는 컴포넌트의 현재 상태를 나타내는 값이며,
상태가 변경되면 해당 컴포넌트와 그 자식 컴포넌트가 다시 렌더링 된다.
** 상태의 주요 특징
1) 컴포넌트 내부에서 관리
- 상태는 컴포넌트 내부에서 선언되고, 해당 컴포넌트에만 영향을 미친다
- 다른 컴포넌트와 데이터를 공유하려면 props를 통해 전달해야 한다.
2) 변경 가능(mutable)
- React의 상태는 변경될 수 있지만, 직접 값을 수정하지 않고 상태를 변경하여 함수(setter)를 사용해야 한다
3) UI 업데이트
- React의 상태는 변경될 수 있지만, 직접 값을 수정하지 않고 상태를 변경하는 함수를 사용해야 한다.
** 상태 변경의 규칙
1) 직접 수정 불가
const [count, setCount ] = useState(0);
setCount(count + 1) ;
cf) count = count + 1 // React가 감지하지 못함2) 비동기적으로 동작
setCount(count + 1); // 상태 업데이트 요청
console.log(count); // 아직 업데이트 되지 않은 이전 값 출력2. 컴포넌트
컴포넌트란 화면의 한 부분을 담당하는 독립적인 코드 블록을 의미한다.
컴포넌트를 재사용 가능하도록 만들어 코드를 효율적이고 유지보수하기 쉽게 만들어준다.
App.js라는 최상위 컴포넌트 기반으로 만듦
3. 가상 DOM(Virtual DOM)
DOM(Document Object Model) : 브라우저가 화면의 구조를 이해하는 방식 (문서의 구조화된 표현)
React는 Virtual DOM 이라는 경량화된 "가상"버전의 DOM을 사용한다.
React는 화면이 변경될 때 실제 DOM을 바로 업데이트하지 않고,
실제 DOM을 복사해둔 가벼운 가상 DOM에서 변경된 부분을 계산한 뒤
최소한의 변경만 실제 DOM에 적용한다
4. 단반향 데이터 흐름
데이터가 부모에서 자식으로만 흐른다는 특징.
부모 컴포넌트는 props를 통해 데이터를 자식에게 전달하고,
자식 컴포넌트는 props를 받아서 UI를 생성하거나 처리
5. JSX (JavaScript XML)
JS에서 HTML을 작성할 수 있는 특별한 문법.
React 컴포넌트를 만들 때, 화면에 보여질 구조를 JS 코드로 작성할 수 있음.
JS의 기능과 HTML 을 결함할 수 있어 더 직관적이고 생산적인 코드 작성이 가능
6. React Hooks
함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 만든 API.
(클래스형 컴포넌트, 함수형 컴포넌트 2가지 존재)
이전에는 클래스형 컴포넌트에서만 상태와 생명주기를 사용할 수 있었지만,
Hooks 덕분에 함수형 컴포넌트에서도 이를 간편하게 사용할 수 있게 됨
ex) useState, useEffect, useContext ...
7. SPA (Single Page Application)
하나의 HTML 페이지로 동작하는 웹 애플리케이션
** 기존 방식 (Multi-Page Application)
- 사용자가 새로운 페이지로 이동할 때마다 서버에 요청하고, 서버가 새로운 HTML 문서를 반환 받음
- 페이지가 전환될 때마다 전체 화면이 다시 로드되므로, 페이지 로딩 시간이 발생하고 화면이 깜빡이는 현상이 나타남
** React 방식(SPA)
- 처음 로드 시 하나의 HTML 파일과 필요한 JS 파일을 서버로부터 받아옴
- 다른 페이지 이동시, 브라우저 페이지 전체를 새로 로드하지 않고 필요한 데이터만 서버에서 가져옴
- 변경된 데이터만 DOM에 업데이트하고, 브라우저는 이 데이터를 사용해 즉각적인 페이지 전환을 제공
- 결과적으로, 더 빠르고 부드러운 사용자 경험을 제공함
