[React] 리액트 개념정리

Wonny·2022년 11월 25일
0

React

목록 보기
1/4
post-thumbnail

리액트란?

리액트란 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다.
ui를 빠르게 만들고, 간편하게 만들기 위해서 페이스북에서 개발되었습니다.

또한 리액트는 컴포넌트들의 집합체라고도 할 수 있습니다.

SPA

SPA(Single Page Application) 는 사용자가 버튼을 클릭했을때 다른 페이지를 다운받아 화면이 깜빡거리면서 리프레쉬 되는 것이 아니라
한 어플리케이션 내에서 해당 컴포넌트를 보여주거나 숨겨서 페이지내에서 자유자재로 네비게이션 할 수 있는것을 말합니다.

CSR

CSR(Client Side Rendering) 는 사용자가 웹 어플리케이션에 접속했을때, 바로 즉각적으로 html을 보는 것이아니라
react 라이브러리 모두 다운받은 다음에 사용자 화면 ui에 보여지도록 하는것으로 Client 측에서 렌더링이 이루어집니다.

라이브러리 vs 프레임워크

  • 라이브러리
    - 좁은 문제를 해결하기 위한 것, 즉 작은 솔루션 단위
    - 리액트 ui를 만들 수 있게 해주는 라이브러리
    - 자율성 보장(네트워크 통신이 필요하면 브라우저에서 제공하는거 다른 네트워크 통신에 필요한 라이브러리를 내가 원하는 것을 사용할 수 있음)
    - 배울게 상대적으로 적어서 진입장벽이 낮다.

  • 프레임워크
    • 무언가를 만드는데 필요한 모든것들이 갖추어진 것
    • ui, 라우팅, 네트워크 통신에 필요한 http clients 등등 다 갖춰져있으므로, 프레임워크에서 정해진 것만 사용하면 됨
    • 권장되는 모든것들을 공부해야함(접근성 낮음), 자율성이 떨어짐

어떤 단위로 컴포넌트를 나눠야 할까요?

  1. 재사용성(DRY): 재사용성이 높을 경우 나누는 것이 좋습니다.
  2. 단일책임(SR): 재사용할 확률이 낫지만 한 컴포넌트에서 너무 많은 일들을 하게 된다면 더 작은 단위로 나누어서 작은 컴포넌트로 나누는 것이 좋습니다.

리액트 정리

데이터를 state(내부 상태), props(외부로 부터 전달받은 상태)가 존재하고,
이 두가지를 나타내는 render가 있습니다.
state, props둘 중 하나라도 상태가 변경될때마다 re-render 됩니다.

💡 리액트에서 render는 return 되는 것들을 말합니다.

함수형 컴포넌트(훅)이란?

훅은 재사용 가능한 함수들! use로 시작하는 함수들은 리액트 훅이라 생각하면됩니다.

💡 Hooks 은 (함수들은) 값의 재사용이 아니라 로직의 재사용을 위한 것입니다.

profile
프론트엔드 개발자를 꿈꾸며

0개의 댓글