FE Framework
- 웹 개발을 위한 Front-End의 프레임워크 혹은 라이브러리로 React, Angular, Vue 등이 있고, 이것들은 모두 개발자들이 웹앱을 더 쉽고 효율적으로 구축하도록 도와주는 도구이다. (왜 쓰는가? web-app을 만들때 씀)
- 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 만들기 위해 사용.
- React가 유연성과 성능으로 인해 대부분의 경우 인기가 많고, Angular는 대규모 앱과 기업적인 환경에서 선택되는 경향이 있으며, Vue는 가볍고 쉬운 문법으로 인해 작은 규모의 프로젝트나 초보자들에게 인기가 있음.
▶ React란?
- FaceBook에서 개발한 오픈 소스 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨
- 웹 애플리케이션 개발을 간단하고 효율적으로 만들어주는데 중점을 둠
- 가상 DOM을 활용하여 성능 최적화.
- 컴포넌트 기반 아키텍처를 기본으로 하고 있으며, 이는 UI를 재사용 가능하고 독립적인 작은 부분으로 나누어 관리할 수 있게함.
▷ React의 주요 특징
⦁ Component
- React에서는 UI를 작은 컴포넌트들로 나누어 관리함
- 컴포넌트들은 독립적이며 재사용 가능하고, 특정 상태와 속성을 가질 수 있음
⦁ Virtual DOM
- 가상 DOM(Document Object Model)을 사용하여 성능 최적화
- 가상 DOM은 브라우저의 실제 DOM과 동기화되어 변경 사항을 최소화하고, 효율적으로 UI를 렌더링함
⦁ JSX
- JSX는 JavaScript XML의 약자로, JavaScript 코드안에 HTML과 유사한 구문을 사용하여 컴포넌트를 정의할 수 있게함
⦁ 단방향 데이터 바인딩
- React에서 데이터의 흐름은 단방향으로 이루어짐
- 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있지만, 자식 컴포넌트에서 부모로 직접 접근하여 데이터를 변경하는것은 불가능.
- 이로인해 데이터 흐름이 명확해지고, 디버깅과 관리가 쉬워짐
⦁ 생명주기 메서드
- React 컴포넌트는 생성, 갱신, 제거 등의 생명주기 단계에 따라 실행되는 특정 메서드들이 있음.
- 이를 통해 컴포넌트의 상태 변화에 따라 필요한 동작을 수행할 수 있음
⦁ 상태 관리
- React 자체는 상태 관리를 위한 고유한 도구를 제공하지 않지만, Redux, MobX, Context API 등과 같은 상태 관리 라이브러리와 함께 사용하여 복잡한 상태 관리를 용이하게 할 수 있음
⦁ 리액트 라우터
- React Router를 사용하여 싱글 페이지 애플리케이션(SPA)에서 라우팅을 구현할 수 있음.
▷ React가 사용되는 분야
⦁ 웹 애플리케이션 개발
- React는 가장 일반적으로 웹 애플리케이션의 프론트엔드 개발에 사용됨.
- 대규모 웹 애플리케이션에서부터 작은 웹 사이트까지 다양한 규모의 프로젝트에서 React를 사용하여 UI를 구축함.
- 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API 통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야함
⦁ 모바일 앱 개발
- React Native라는 React의 파생 프레임워크를 사용하여 iOS 및 Android 플랫폼을 대상으로하는 네이티브 모바일 애플리케이션을 개발할 수 있음.
- React Native는 JavaScript로 애플리케이션을 작성하며, 네이티브 기능과 완전히 통합됨.
⦁ 싱글 페이지 애플리케이션(SPA)
- React는 React Router와 함께 사용하여 싱글 페이지 애플리케이션을 구축하는데 매우 유용함
- SPA는 페이지 전환없이 사용자 경험을 향상시키는 웹 애플리케이션을 의미함
⦁ Component Library
- React 컴포넌트는 재사용 가능하고 독립적인 단위로 작동하기 때문에 UI 컴포넌트 라이브러리로 활용되는 경우가 많음.
- Material-UI와 Semantic UI React는 React 기반의 컴포넌트 라이브러리로 유명함
⦁ 대시보드 및 데이터 시각화
- React의 성능과 컴포넌트 기반 아키텍처는 대시보드 및 데이터 시각화 애플리케이션 개발에 적합
- React를 사용하면 복잡한 상호작용과 데이터 시각화를 효율적으로 구현할 수 있음
⦁ 게임 개발
- React는 게임 개발에도 사용되고 있으며 게임 UI나 UI 컴포넌트를 개발하는 등의 활용 사례가 있음
⦁ 기타 플랫폼과 분야
- React의 유연성과 인기로 인해, 기타 분야에서도 React를 사용하는 사례가 늘어나고 있음
- 데스크톱 앱 개발을 위해 Electron과 함께 사용되기도 함
> 브라우저 동작 흐름
HTML 수신 → Parsing → DOM 트리 → Layout 계산 → Paint
- DOM 트리에는 인터렉션 후 새로운 DOM이 추가될 수도 있고 기존 DOM이 업데이트 될 수 있음.
- DOM 트리에 뭐가 많이 생기게 되면 Layout 계산 및 Paint 작업은 작업에 비용이 많이 들게 된다. (레이아웃 계산 등..)
- 웹 앱이 점점 복잡해지고 다양한걸 제공한다면 브라우저에 부담이가고 개발자도 힘들어짐 → 이를 해소하고자 리액트 사용
- 다시 그리기와 Virtual DOM : 뷰를 변경해야 할 때, 이런 저런 코드를 써가며 고민하지 말고 단순하게 다시 그리기 & 매번 모두 다시 그리기엔 비용이 많이 드니 메모리를 이용해 최적화 시키기
▶ React 주요 개념 정리
♧ Virtual DOM
- Virtual(가상의), DOM(HTML 문서를 베이스로 만든 페이지 구성요소 인터페이스)
- Virtual은 메모리 안의 결과물, 즉 Real(화면에 보여진 결과물)과 대비된다.
- 화면에 렌더는 되지 않고, 메모리에만 존재
- Virtual DOM은 DOM의 변경사항들을 담고 있음. (DOM 변경사항들이 Virtual DOM에 먼저 반영 → 적절한 시점에 Real DOM에도 반영)
> Virtual DOM 사용 이유
- 변경사항들을 사용자에게 적절한 시점에 보여주기 위해서(버퍼링과 같은 느낌)
- 각각의 React Element를 담는 용도인듯? (React DOM Node)
♧ React Element
- 실제로 화면에 랜더링할 DOM 노드들의 정보를 React에게 알려주기 위한 수단 / 화면에 구성될 모습에 대한 정의 (렌더 함수같은 자기가 표현하고 싶은 무언가를 담고 있는 내용을 React Element라고 함)
- DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당
- type 필드와 props 필드로 표현됨
- 엘리먼트는 다른 엘리먼트를 props로 가질 수 있음
- 엘리먼트가 생성되면 절대로 변화하지 않음
- 엘리먼트 생성을 위해서 React.createElement()나 JSX의 태그 문법, element factory helper를 사용
- 엘리먼트들로 이뤄진 트리를 엘리먼트 트리라고 하며, 이는 메모리 상에만 존재하는 가상 DOM임.
> DOM Element
- 엘리먼트의 type이 태그 이름에 해당하는 문자열인 경우를 말함
- 해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 어트리뷰트들을 표현함.
- React가 실제로 화면에 랜더링하는 대상에 해당됨
♧ JSX
- JavaScript와 XML을 합친 문법
- Element를 이해하기 쉽게 도와줌
♧ Component
- 컴포넌트는 render() 메서드가 있는 클래스나 함수로 정의될 수 있음.
- Input으로 props를 받으며, element tree를 output으로 반환함. (Input: props, Output: Element)
- props는 부모에서 자식으로 전달됨.
> Component 설계 패턴
↳ (여러 곳에 사용될 수 있도록 추상화하여 작성해야 함)
- Higher Order Component Pattern
- Compound Components Pattern
- Provider Pattern
- Hook Pattern
- Atomic Design Pattern
♧ Props & State
- 동적인 페이지를 위해 Virtual DOM을 업데이트하고, Virtual DOM을 업데이트 한다는 것은 Props와 State를 변경하는 것.
- props나 state의 업데이트가 일어나면 Component의 render 함수가 한번 호출됨. render 함수의 결과물로 새로운 element가 만들어짐. 이 element는 Virtual DOM에 반영되거나 기존 element에 의해 무시되거나 함.
↳ 새로운 element가 기존 element 대신 업데이트 되는 기준 (Reconciliation) :
- Type이 다르다면, 이전 트리를 버리고 새로운 트리를 적용함. 이 과정에서 자식 엘리먼트들도 모두 제거. (Diffing Algorithm)
- 같은 타입의 DOM Element인 경우, 속성이 다른 내용에 대해서만 새롭게 수정함. 자식은 재귀적으로 Diffing Algorithm을 따름.
- 같은 타입의 Component Element인 경우, state는 유지되고 props는 새로 만들어진 후 render를 호출해 비교함. 자식은 재귀적으로 Diffing Algorithm을 따름.
- 여러개의 동일한 Element가 같은 깊이에 존재한다면, key 속성을 통해서 업데이트의 대상을 추릴 수 있음
| Props | State |
| 외부에서 주입되는 데이터로 부모 컴포넌트에서 자식 컴포넌트로 전달 | 컴포넌트에서 생성되며, 내부에서만 사용 가능한 객체 |
| 순수 JS 객체로 컴포넌트안에서 수정되선 안됨 | 순수 JS 객체로 수정가능 |
| 함수의 인자값과 비슷 | 함수 내의 지역변수와 비슷 |
- props 업데이트 : 부모에서 다른 속성값을 주는 경우
- state 업데이트 : 컴포넌트 내에서 state 업데이트 함수인 setState 사용
> Instance
- 인스턴스는 클래스형 컴포넌트에서 this로 참조하는 것
- 로컬 상태와 lifecycle 이벤트에 대응하는 것에 유용함.
- 함수형 컴포넌트는 인스턴스를 갖지 않으며, 클래스 컴포넌트만이 인스턴스를 가짐.
- 리액트가 인스턴스를 만드는 것을 관리하므로, 직접 컴포넌트 인스턴스를 만들지 않아도 됨.
> Lifecycle
- 컴포넌트의 등장부터 퇴장까지의 흐름을 말하며 여러 단계에 해당하는 API 사용 가능
- Mounting : constructor → render → (DOM 반영) → componentDidMount
- Updating : render → (DOM 반영) → componentDidUpdate
- Unmounting : componentWillUnmount
▷ React 사용 트렌드
- Class 사용에서 Function으로 넘어갔는데 그 중심에는 Hooks가 있음.
↳ Function으로 넘어간 이유로는 Component 개발시에 복잡해진 Component 들을 관리하기 쉽게 해주기 위함. (Class Component 일때는 render를 다시 해주는 로직들이 너무 끈끈하게 붙어있었음(분리 어려움 → 로직 재사용 어려움))
- Hooks는 View와 Logic을 분리하기 위한 수단. Component와 분리된 로직이며, Component의 렌더를 제어할 수 있음.
- View를 담당할 Component에는 State와 Life Cycle이 없어야함.
- Hooks API : useState, useEffect, useMemo, useCallback ..
⦁ useState = Stateless Component → Stateful Component
- useState 사용법 : [상태값, 상태변경함수] = useState(초기값)
// stateless
function FunctionComponent(props: Props): React.ReactElement {
return (
<div>
<h1>{props.title}</h1>
</div>
);
}
// stateful
function FunctionComponent(props: Props): React.ReactElement {
const [subtitle, setSubtitle] = React.useState("subtitle");
return (
<div>
<h1>{props.title}</h1>
<h2>{subtitle}</h2>
</div>
);
}
⦁ useEffect
- Side Effect(= DOM에 반영된 이후 필요한 작업들. 네트워크 요청, 직접적인 DOM 변경, 로깅, 타이머 설정, 데이터 구독)를 처리하는 Hooks API
- useEffect(함수, [의존성])과 같이 사용.
- useEffect 동작 방식 : DOM 반영(모든 render마다) 이후 Side Effect 처리
↳ (모든 render 마다 → 의존성 체크 → Clean-up 동작 → Effects 동작)
⦁ useMemo, useCallback
- 사용 이유 : Memoization(이전의 사용된 데이터를 그대로 사용하는 방식)을 하기위해 사용
- useMemo와 useCallback은 의존성에 따라 memoized 값을 제공하는 Hooks API이다.
- useMemo(함수, [의존성]), useCallback(함수, [의존성])과 같이 사용.
댓글