리액트란?
리액트란 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다.
ui를 빠르게 만들고, 간편하게 만들기 위해서 페이스북에서 개발되었습니다.
또한 리액트는 컴포넌트들의 집합체라고도 할 수 있습니다.
SPA
SPA(Single Page Application) 는 사용자가 버튼을 클릭했을때 다른 페이지를 다운받아 화면이 깜빡거리면서 리프레쉬 되는 것이 아니라
한 어플리케이션 내에서 해당 컴포넌트를 보여주거나 숨겨서 페이지내에서 자유자재로 네비게이션 할 수 있는것을 말합니다.
CSR
CSR(Client Side Rendering) 는 사용자가 웹 어플리케이션에 접속했을때, 바로 즉각적으로 html을 보는 것이아니라
react 라이브러리 모두 다운받은 다음에 사용자 화면 ui에 보여지도록 하는것으로 Client 측에서 렌더링이 이루어집니다.
라이브러리 vs 프레임워크
- 라이브러리
- 좁은 문제를 해결하기 위한 것, 즉 작은 솔루션 단위
- 리액트 ui를 만들 수 있게 해주는 라이브러리
- 자율성 보장(네트워크 통신이 필요하면 브라우저에서 제공하는거 다른 네트워크 통신에 필요한 라이브러리를 내가 원하는 것을 사용할 수 있음)
- 배울게 상대적으로 적어서 진입장벽이 낮다.
- 프레임워크
- 무언가를 만드는데 필요한 모든것들이 갖추어진 것
- ui, 라우팅, 네트워크 통신에 필요한 http clients 등등 다 갖춰져있으므로, 프레임워크에서 정해진 것만 사용하면 됨
- 권장되는 모든것들을 공부해야함(접근성 낮음), 자율성이 떨어짐
어떤 단위로 컴포넌트를 나눠야 할까요?
- 재사용성(DRY): 재사용성이 높을 경우 나누는 것이 좋습니다.
- 단일책임(SR): 재사용할 확률이 낫지만 한 컴포넌트에서 너무 많은 일들을 하게 된다면 더 작은 단위로 나누어서 작은 컴포넌트로 나누는 것이 좋습니다.
리액트 정리
데이터를 state(내부 상태), props(외부로 부터 전달받은 상태)가 존재하고,
이 두가지를 나타내는 render가 있습니다.
state, props둘 중 하나라도 상태가 변경될때마다 re-render 됩니다.
💡 리액트에서 render는
return되는 것들을 말합니다.
함수형 컴포넌트(훅)이란?
훅은 재사용 가능한 함수들! use로 시작하는 함수들은 리액트 훅이라 생각하면됩니다.
💡
Hooks은 (함수들은) 값의 재사용이 아니라 로직의 재사용을 위한 것입니다.
