[React] Redux란?

2024. 11. 21. 17:41·FE·Client/React
728x90

props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리.

Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있다.

모든 컴포넌트에서는 Redux에 있는 데이터(상태)를 가져다가 사용할 수 있다.

 

Redux라는 커다란 저장소 내에 데이터(상태)가 저장되어 있어,

사용자는 정보를 가지러 멀리 있는 창고로 갈 필요 없이 Redux내에서 가져오면 된다.

깊이가 깊어질수록 state 관리가 어렵고 가독성이 떨어지는 문제 해결 가능.

 

https://dev.to/stuxnat/final-react-project-2poi

 

이 때문에 엄청 멀리있는 컴포넌트에도 귀찮은 props 전송을 할 필요가 없다!

(React는 부모 ➡ 자식으로만 데이터가 전달 가능한 단방향 데이터 흐름을 갖기 때문에 자식 ➡ 부모로 데이터를 전달하기 위해서는 state를 사용해 전달해야한다.)

모듈 단위로 컴포넌트를 개발하는 프로젝트나 시스템에서 유용하게 쓰일 수 있는 전역 상태관리 라이브러리.

 

1. 프레임워크(Framework)란?

개발자가 소프트웨어 개발함에 있어 개발시간을 줄이고, 코드의 재사용성을 증가시키기 위한 일종의 클래스 묶음이나 뼈대, 틀을 라이브러리 형태로 제공되는 것

제어의 역전(주도권이 개발자가 아닌 프레임워크에 있음)이 적용된 대표적인 기술

 

프레임워크는 스스로 제어 흐름의 주도성을 갖는다(=제어의 역전)

설정파일의 태그 설정이나, DB연동 방법 등에 대한 규칙이 있고 개발자는 이를 따라야 한다.

 

cf) Spring, Spring Boot는 프레임워크.

 

2. 라이브러리(Library)란?

라이브러리는 단순 활용가능한 도구들의 집합

개발자가 만든 클래스에서 호출하여 사용, 클래스의 나열로 필요한 클래스를 불러서 사용하는 방식

 

라이브러리는 가져다가 사용하고 호출하는데 있어 개발자에게 주도성이 있다.

즉, 함수들이나 기능 모음을 가져다가 쓰는 것

 

cf) React는 라이브러리라고 할 수 있음. 그래서 다른 서비스에 가져다가 쓰기 용이함.

 

3. 차이점

 

#프레임워크
집을 짓기 위한 과정을 라이브러리와 프레임워크에 비유해보면, 
프레임워크는 모델하우스를 짓는것에 비유할 수 있다. 
모델하우스의 소파의 위치, 의자와 책상의 위치, 방의 용도 등. 
우리가 수정할 수 있는 범위는 제한적이다. 
주방의 위치, 기둥의 개수, 방의 개수 등 집을 이루고있는 굵직한 뼈대는 수정할 수 없다. 
사용자는 모델하우스가 제공하는 청사진 안에서"만" 움직일 수 있다. 
프레임워크가 제공하는 틀에 따라 코드를 작성해야 하는것이다. 
즉, 통제권은 사용자가 아닌 프레임워크가 쥐고 있다.

#라이브러리
하지만 라이브러리는 이케아에서 산 재료로 가구를 조립하는것에 비유할 수 있다. 
집에서 사용할 가구를 조립하거나 만들기 위해 벌목부터 시작해서 목공을 하거나, 
가죽을 얻기위해 사냥을 하고싶은 사람은 거의 없을것이다.🙄 
그래서 이케아 혹은 가구점에 가서 기본적인 재료를 사서 입맛대로 조립하고 배치할 수 있다. 
재료의 선택권이나 통제권은 사용자에게 있는 것이다.

출처: 프레임워크vs라이브러리

 

728x90

'FE·Client > React' 카테고리의 다른 글

[React] SPA(Single Page Application)란? (+CSR/SSR)  (0) 2024.11.21
[React] Dispatch<SetStateAction<type>> ?  (0) 2023.04.27
[React] 제네릭(generic)  (0) 2023.04.27
[React] 타입 추론(Type Inference) | 타입 별칭(Type Alias)  (0) 2023.04.27
[React] TypeScript  (0) 2023.04.27
'FE·Client/React' 카테고리의 다른 글
  • [React] SPA(Single Page Application)란? (+CSR/SSR)
  • [React] Dispatch<SetStateAction<type>> ?
  • [React] 제네릭(generic)
  • [React] 타입 추론(Type Inference) | 타입 별칭(Type Alias)
DROPDEW
DROPDEW
💻 Developer | 기록하지 않으면 존재하지 않는다
  • DROPDEW
    제 2장 1막
    DROPDEW
  • 전체
    오늘
    어제
    • Dev (417) N
      • App·Android (1)
      • BE (44)
        • HTTP 웹 기본 지식 (8)
        • 스프링 입문 - 코드로 배우는 스프링 부트, 웹 .. (12)
        • 스프링부트와 JPA 활용 (11)
        • 스프링부트 시큐리티 & JWT (0)
        • PHP (6)
      • FE·Client (23)
        • HTML (1)
        • React (19)
        • Unity (1)
      • Data (17) N
        • AI (7) N
        • Bigdata (6)
        • Database (1)
        • 빅데이터분석기사 (2)
      • Infra (0)
      • Activity (0)
        • Education (0)
        • Intern (0)
        • 리모트 인턴십 6기 (0)
        • 구름톤 유니브 4기 (0)
        • SW교육기부단 15기 (0)
      • CS (8)
      • 취준 (13)
        • 자격증 (4)
        • 인적성·NCS (6)
        • 코테·필기·면접 후기 (3)
      • 코테 (270)
        • Algorithm (222)
        • SQL (35)
        • 정리 (13)
      • 인사이트 (27)
        • 회고 (0)
        • 금융경제뉴스 (7)
        • 금융용어·지식 (2)
        • 북마크 (7)
  • 블로그 메뉴

    • 홈
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    누적합
    티스토리챌린지
    백준
    이분탐색
    다이나믹프로그래밍
    정렬
    수학
    투포인터
    그리디알고리즘
    브루트포스 알고리즘
    그래프이론
    그래프탐색
    너비우선탐색
    매개변수탐색
    오블완
    자료구조
    문자열
    시뮬레이션
    구현
    최단경로
  • 최근 댓글

  • 최근 글

  • 250x250
  • hELLO· Designed By정상우.v4.10.3
DROPDEW
[React] Redux란?
상단으로

티스토리툴바