> For the complete documentation index, see [llms.txt](https://woobeens-organization.gitbook.io/megaptera_fe/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://woobeens-organization.gitbook.io/megaptera_fe/frontend-survival/week1/react.md).

# 3. React

### Keyword

1. React란?
2. React 컴포넌트
3. React 리렌더링
4. IoC(Inversion of Control)
5. Library vs Framework

### 1. React?

> 리액트는 사용자 인터페이스(User Interface)를 구축하기 위한 Javascript 라이브러리로 컴포넌트 기반 아기텍처를 통해 **재사용 가능**한 UI를 만듦으로 **생산성**이 증가한다.\
> 또한 UI의 **변경된 부분만을 업데이트**하여 빠른 사용자 경험을 제공한다.

***

<br>

### 2. React 컴포넌트

> 리액트 애플리케이션 UI를 구성하는 독립적인 단위로\
> 컴포넌트는 **상태(state)** 를 가질 수 있으며 UI를 표현하고 이벤트를 처리할 수 있다.

***

<br>

### 3. React 리렌더링

> React에서의 리렌더링이란 **render함수의 호출**을 의미\
> 이것은 실제 DOM에서 UI를 다시 그리는것을 말한다.\
> 컴포넌트의 state, props의 변경으로 인한 컴포넌트 UI 업데이트를 트리거한다.

* 상태를 변경한다는 것은 setState함수를 실행할 때 컴포넌트 UI 업데이트를 트리거하는 것인데 이는 render함수를 호출한다는 의미다.
* 위와 같은 이유로 props의 변경 여부와 상관없이 모든 하위 컴포넌트가 리렌더링 된다
  * 생각해보면 함수형 컴포넌트의 return값, 클래스 컴포넌트의 render함수의 JSX문법으로 자식 컴포넌트를 호출하고 있기 때문에 리렌더링 되는것이 당연함

**`props가 변경될 때, 컴포넌트가 업데이트 되지 않는 이유?`**

1. props가 setState함수를 통해 올바른 업데이트가 되지 않았을 경우
2. props의 데이터 참조가 동일할 경우

Javascript의 참조값은 메모리의 주소값(자세히는 조금 더 복잡함, 식별자와 데이터가 저장되는 영역의 개념이 있음)을 복사하기 때문에 동일 메모리공간을 참조하게 되므로 props 객체를 직접 변경하게 될 경우 React가 감지하지 못함

***

<br>

### 4. IoC(Inversion of Control)

> Framework의 주요한 특징으로 프로그램의 흐름 제어를 개발자가 아닌 프레임워크에 위임하는 개념이다.

* 리액트에 대해서 찾아보면 view만을 신경쓰는 프레임워크 또는 라이브러리라 설명한다.
* 개발자는 그저 규칙에 따라 컴포넌트를 선언하고 조합하여 UI를 설계하기만 하면 컴포넌트 생명주기 관리, 렌더링, 업데이트, 이벤트 처리를 리액트가 자동으로 관리한다.
* JSX는 Javascript의 확장된 문법으로 XML의 구조를 따르며 HTML 마크업처럼 작성하면 리액트가 알아서 element를 생성하고 이 JSX를 통해 UI를 선언적으로 프로그래밍하고 가독성 높게 작성할 수 있다.

***

<br>

### 5. Library vs Framework

> 제어의 소유가 누구에게 있는지로 구분할 수 있다.

#### Library

* 개발자에게 제어 권한이 있어 필요한 기능을 호출하여 사용할 수 있다.
* 라이브러리는 단독 사용하거나 또는 다른 라이브러리, 프레임워크와 조합하여 사용할 수 있다.
  * 예를 들면, Redux 전역 상태 관리 라이브러리와 React의 조합이 있다.

#### Framework

* 개발자는 프레임워크의 규칙에 따라 코드를 작성하고, 프레임워크가 흐름을 제어해 필요한 기능을 호출한다.
* 프레임워크는 내부에서 사용 가능한 라이브러리를 포함하고 있다.

> 리액트는 규칙에 따라 코드를 작성하면서 외부 라이브러리를 자유롭게 조합하여 사용하므로 두 가지 성격을 모두 가지고 있음

***

<br>

### 키워드 추가 정리

* DOM
* Virtual DOM
* 리렌더링 최적화(useMemo, useCallback)