1. React 에 대해 알아보자 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

css는 깃허브 참고 https://github.com/katf101/React-The_Complete_Guide

---

1. 왜 React 를 사용하는가?

• Component 구조를 가져 유지보수와 관리가 용이하다.
• Virtual DOM 으로 동작하는 구조이기 때문에 리렌더링이 매우 빠르다.
• 다른 웹 프레임 워크나 라이브러리와 함께 사용이 가능하다.

---

1.1 React - Component

작은 단위로 나누어진 블럭을 결합하여 사용자의 인터페이스를 만드는 것여기서 블럭을 컴포넌트로 생각하면 된다. 

Component 특징

• 코드를 세분화 하여 유지보수를 쉽게 할 수 있다.
• 재사용이 가능하다.

---

1.2 React - Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.

React가 DOM을 업데이트 하는 방법 ( feat. 리액트를 다루는 기술)

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.

2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

3. 바뀐 부분만 실제 DOM에 적용합니다.

Virtual DOM 특징

Virtual DOM 을 사용한다고해서 무조건 리렌더링이 빠른 것이 아니라 Virtual DOM의 장점은 업데이트 처리 간결성이기 때문에 업데이트가 잦은 코드에 사용하기 적합하다.

---

2. 선언적 방식

바닐라js 에서는 명령형으로 프로그래밍 하였다면 React에서는 선언형으로 프로그래밍 해야한다.

선언형이란?

개발자가 원하는 최종 상태, 즉 목표 상태 또는 다양한 상황에 따라 다른 목표 상태를 정의하는 방식

React에서는

 

자바스크립트에서 하는 것처럼 직접 구체적인 DOM을 업데이트하는 지침들을 작성할 필요가 없다. 대신, 리액트나 리액트 컴포넌트로 작업할 때는 최종 상태와 어떤 상황에서 어떤 상태가 사용되어야 하는지 정의하면 된다.