React 살펴보기(1)

2023.8.16 - 27min

front end 프레임워크는 왜 존재하는가?

• 예전에는 백엔드에서 뷰와 데이터를 이용하여 웹페이지를 클라이언트에 보내줌
• 상호작용이 많아지고 기능들이 늘어나면서 클라이언트 사이드의 역할이 중요해짐 , spa
• 웹에서 가장 중요한 일은 ui를 할상 데이터와 동기화 상태로 유지하는 것
• javascript로 그 일을 하기 위해선 돔을 직접 조작해야하고, 조작할 때마다 돔트리를 순회해야한다. 또, 데이터를 dom에 저장하고 있기 때문에 프로젝트가 커질 수록 일관성을 유지하기가 힘들다.

react vs vanilla js

react란?

React is a modern, extremely popular, declarative, component-based, state-driven javascript library for building user interfaces, and Facebook created it.

Based on components

컴포넌트를 만들고 레고를 조립하듯 ui를 구성함 (재사용성)

Declarative

선언적이라는 말은 how to 를 논하려는게 아님. jsx를 이용하여 ui가 어떻게 보여야 하는지 선언하면 데이터를 결합하여 그대로 보여주게 됨.
js처럼 직접 돔을 조작하여 어떻게 데이터가 바뀌어야하는지 how to 를 논하게 된다면 절차적

State-driven

데이터가 바뀔 때 마다 자동으로 최신 상태를 보여주는 리렌더링이 일어남 (상태변경에 반응) -> react라고 부르는 이유

react는 라이브러리일까? 프레임워크일까?
라이브러리 입니다. 소위 말하는 view layer 이기 때문. 앱을 빌드하려면 여러 외부라이브러리가 필요합니다. -> 이 문제를 해결하기 위한 프레임워크 next.js remix 등