[week_08] React 기초 Ⅰ(1) OT

1. SPA (Single Page Application)

클라이언트가 서버로 최초 접속 요청을 보내면, 서버로부터 HTML을 전달 받는다. 그 후 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달 받는다. 이 때, 페이지에서 변경된 부분만 계산하여 다시 그리게 된다. (전통적인 페이지의 경우, 변경이 있을 때마다 HTML을 새로 받아서 페이지를 처음부터 다시 그림)

👉 React를 사용하게 되면 이러한 행위를 편리하게 할 수 있다!

 

2. React

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
• Component : React의 독립적인 단위
• Virtual DOM : 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념
• JSX : JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경 제공, Template 라이브러리, HTML과 유사

 

3. React의 장점

1) 생산성 / 재사용성

• Component와 Hook을 활용
• 작은 단위의 독립적인 요소로 개발 ➡ 생산성과 코드의 재사용성 향상
• JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 수 있어서 개발이 간단해지고, 다른 사람의 개발 의도를 파악하기 쉬워진다.

2) 풍부한 자료 / 라이브러리

• Fluent UI, Ant Design, styled components, Redux, Mobx, React Hook Form, ...

3) 다양한 사용처

• 단순 웹 어플리케이션 이외에도 React-Native에 적용하여 안드로이드 애플리케이션 및 iOS 애플리케이션 개발 가능

 

4. React의 특징

1) HTML 내에 중괄호({})를 활용해서 JavaScript 코드 작성 가능

2) 컴포넌트 형태로 하나의 블록을 만들어서 필요한 곳에 조립하여 개발

3) 컴포넌트 내에서 State를 이용해서 데이터를 유동적으로 관리 👉 State가 변경될 때마다 컴포넌트가 다시 렌더링(Rendering) 된다.