React ⭐

• 리액트(React)는 페이스북에서 개발한 오픈소스 UI 라이브러리로, 유저 인터페이스를 만들기 위한 Javascript 라이브러리 이다.
• 개발자가 직접 DOM을 다루지 않아도 React가 데이터 상태에 따라 자동으로 UI를 관리해주므로 특정 상태에 따른 인터페이스 구현에 집중할 수 있게 해준다.

React 특징 ✔

1. 컴포넌트

• React는 컴포넌트 중심 라이브러리이다.
  * 컴포넌트는 UI를 구성하는 개별 단위
• 재사용성이 높고 유지보수가 쉬운, 기능별 독립적인 단위로 쪼개진 블럭
• props나 state를 입력받아 DOM Node를 출력하는 함수
• React에서는 수많은 컴포넌트를 레고 블럭처럼 조립해 하나의 애플리케이션으로 생성한다.

1.1 props

• props는 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터이다.
  * 즉, 읽기 전용 데이터? 라고 생각하자
• 자식 컴포넌트에서 전달 받은 props를 변경할 수 없고 props를 전달해준 부모 컴포넌트에서만 props를 변경할 수 있다.

1.2 state

• state는 동적인 데이터를 다룰 때 사용한다.
  * 즉, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용
• state는 클래스형 컴포넌트에서만 사용할 수 있는데, 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다.
• 하지만, 완전 불가능한 것은 아니다.
  자신보다 상위에 있는 state를 변경하는 삼수를 props로 받는다면 변경이 가능하다.

2. 단방향 데이터 흐름

• React는 다른 MVC 구조와 다르게 단방향 데이터 흐름을 지향한다.
• 데이터(props)는 부모 컴포넌트로 부터 자식 컴포넌트에게로 흐른다.
• 데이터의 변화에 따라 UI가 갱신된다.
• UI가 변하더라도 데이터는 변하지 않는다.

MVC 패턴 ❗

• 프레임워크들은 데이터단을 담당하는 모델(Model)
• 사용자의 화면에서 보여지게 되는 뷰(View)
• 사용자가 발생시키는 이벤트를 처리하는 컨트롤러 (Controller)
  위와 같은 세가지로 이루어진 패턴을 MVC 패턴 이라고 말한다.

• 프레임워크들의 모델은 양방향 바인딩으로 작동하고, 이때 모델값이 변하게 되면 뷰의 값도 변하게 된다.
• 변화는 상당히 복잡하고 어려운 작업이다.
  특정 이벤트가 발생했을 때 모델에 변화를 일으키고, 그 결과에 따라 어떤 DOM을 가져와서 어떻게 뷰를 업데이트 할지 정해야 한다.
  * 그래서 사용하는 것이 Virtual DOM 이다.

3. Virutal DOM

• 가상의 DOM(Document Object Model)
• 변화가 일어나면, 가상 DOM에 한번 렌더링 후 기존의 DOM과 비교
  * 다른 점을 찾아 바뀐 부분만 실제 DOM에 업데이트 한다.
• DOM 조작이 일어나면 브라우저는 렌더링을 위해 연산 작업을 하는데, 그것을 한번만 하게하기 때문에 연산 횟수가 줄어들어 성능이 좋아진다.
• 또한, Virtual DOM은 기존 DOM의 단점을 보완했지만, 매번 DOM 보다 Virtual DOM이 빠른것은 아니다.
  즉, 상황마다 다르기 때문에 이러한 상황을 판단하는게 개발자의 역량인것 같다.

한번 React를 사용해보면 다른 것은 사용하기 힘들정도로 유용하고 편리하다던데 얼마나 편리할지 궁굼하다.🔥🔥

end