리액트 개념 정리

리액트

• UI 를 만들기 위한 JavaScript 라이브러리
• UI 를 컴포넌트 단위로 보여주고 이벤트에 반응하도록 만들어짐
• 리액트 === 컴포넌트들
• 컴포넌트
  • 다른 컴포넌트들과 독립적인 응집도가 높은 UI 블럭
  • 독립적이어야 함
  • 고립되어 있어야 함
  • 재사용성이 높아야 함

---

컴포넌트 나누는 기준

• 재사용성
  • 반복되는 것을 컴포넌트로 만들어서 재사용성을 높임
• 단일책임
  
  • 한 컴포넌트 안에서 너무 다양한 로직을 처리하는 경우
  • 재사용될 가능성이 낮더라도
  • 작은 단위로 나눔

---

리액트 동작 원리

• 컴포넌트 정의
  • 함수로 정의함
  • 함수의 반환 값은 UI 에 표기할 html 처럼 생긴 JSX 로 만듦
•  render
  • JSX 문법을 사용해 컴포넌트를 만들 수 있음
  • 상태가 변경될 때 마다 re-render 됨
  • 실제로 변경된 부분만 화면에 업데이트 됨
• state
  • 컴포넌트의 내부 상태 데이터
• props
  • 외부에서 전달받은 상태 데이터

---

리액트는 Virtual DOM Tree 를 가지고 있음

• Virtual DOM Tree 에서 무엇인가 업데이트 될 경우
  • 바로 DOM Tree 에 업데이트 하지 않음
  • 변경 전의 Virtual DOM Tree 와 비교함
  • 변경된 부분만 DOM Tree 에 업데이트 함
• 모든 부분을 업데이트 하지 않기 때문에 빠른 업데이트 가능
  • 1초에 60개의 프레임이 동작해야 빠르고 부드럽다고 느껴짐 (60fps)

---

클래스형 컴포넌트

• 함수형 컴포넌트가 나오기 전에는 클래스형 컴포넌트를 사용했음
• 클래스로 만들어야 함
• this 바인딩 이슈가 있음
• 로직들을 재사용하기 어려움

함수형 컴포넌트

• 클래스형 컴포넌트의 단점을 개선함
• 함수로 간편하게 만들 수 있음
• React Hooks
  
  • 재사용 가능한 함수들
  • 다양한 컴포넌트에서 로직을 재사용할 수 있음
  • 값의 재사용이 아니라 로직의 재사용을 위한 것임
  • useState, useEffect, useRef, useMemo, usecallback, usecontext ...