리액트란 UI를 만드는 자바스크립트 라이브러리!
SPA(Single Page Application) - 한 어플리케이션 내에서 자유자재로 내비게이션 할 수 있음
CSR(Client Side Rendering) - 사용자가 어플리케이션에 접속했을 때 즉각적으로 HTML을 보는 것이 아니라 리액트 라이브러리를 다 다운받은 후에 UI가 표시되기 때문에 client측에서 렌더링이 일어난다.
프레임워크와 라이브러리
웹 프레임워크 - 무언가를 만드는 데 필요한 모든 것들이 다 갖춰진 것!
UI, Routing, HTTP Clients, State management가 모두 갖춰진 것!
단점은 자율성이 떨어진다. 정해진 틀 안에서 정해진 규칙에 따라야 하기 때문!
ex) Angular, Android, IOS, Vue(HTTP 통신과 State management가 포함되지 않았기 떄문에 경량형 프레임워크임!)
라이브러리 - 큰 골격이나 규칙이 정해지지 않고 조금 더 좁은 문제를 해결하기 위한 작은 솔루션 단위이다.
자율성이 보장되고, 진입장벽이 낮다!
ex) React
리액트의 철학
Renders UI and responds to(reacts to) events
UI를 보여주고 이벤트에 반응하도록 만들어진 라이브러리!
리액트에서 중요한 것은 components! 재사용성 up!
그럼 어떤 단위로 컴포넌트를 나눠야 하나?
재사용성 - DRY(Don't Repeat Yourself)
단일책임 - SR(Single Responsibility)
함수형 컴포넌트, 클래스형 컴포넌트
클래스형 컴포넌트의 단점들
- 클래스는 어려워
- this 바인딩 이슈
- 로직들을 재사용하기 어려움
함수형 컴포넌트는 react hook을 사용해서 재사용성이 높음!
React는!
데이터를 State(내부 상태)와 Props(외부로부터 전달받은 상태)를
나타내는 render가 있다.
상태가 변경될 때마다 re-render 된다!
실제로 변경된 부분만 화면에 업데이트 된다!
그래서 속도가 빠름!
Hooks는(함수들은) 값의 재사용이 아니라 로직의 재사용을 위한 것!!
