일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- DIGITALHANARO
- 백틱
- 부트캠프
- `
- 네이버로그인창만들기
- 유데미
- 프론트엔드개발자양성과정
- 디지털하나로
- 디지털교육
- 디지털하나로입학식
- s3
- 맥북백틱
- 하나은행
- 취준생
- 배포
- 버전생성프로세스
- Next.js
- 웅진씽크빅
- 개발자교육과정
- 프로젝트캠프
- github
- 스나이퍼팩토리
- kdt
- 맥북백틱입력
- udemy
- 디지털취업
- 미래내일일경험
- 프론트엔드배포
- 깃허브 레포지토리와 로컬 코드 연결하기
- Today
- Total
Land of Joe
24년 01월 11일 심화과정#5 Redux 본문
전역 상태 관리 Global State Package에 대해 배웠다.
전역 상태 관리의 종류에는 Redux, Recoil, Justand, jotai 등 여러가지가 있다.
하나하나에 대해 알기 이전에 전역 상태 관리가 무엇인지, 그 필요성이 대두된 배경이 무엇인지 알아보자.
전역 상태 관리 Global State Package는 State를 전역변수로 관리하는 패키지
그렇다면 기존 useState의 특징에 대해 알아보자.
[ useState의 특징 ]
1. 해당 State를 필요로 하는 부모 컴포넌트에 State를 선언해줘야 한다
- 이벤트의 시작지점과 도착지점이 되는 컴포넌트 두 개를 하나의 부모 컴포넌트로 묶어서 그 부모 컴포넌트에 state를 선언해준다
- 그렇게 부모 컴포넌트에 선언한 state를 props로 내려주는 형태
→ 쓸 데 없는 부모 컴포넌트가 생기게 됨
→ props 지옥이 발생하게 됨
→ 선언 위치와 도착 위치가 일관되게 발생하지 않아 데이터의 흐름이 복잡해지고 state가 선언된 위치를 찾기 어려워짐
2. 새로고침하면 초기화 된다
- 리랜더링을 제외한 컴포넌트 랜더링 시 state가 초기화 된다
→ 장점: 회원가입의 input일 때 등의 상황에서는 오히려 초기화되는 게 좋음
→ 단점: 게시판의 페이지네이션이 불가하다
그러한 이유로 전역 상태 관리의 필요성이 대두되었다
- 말그대로, state를 전역변수로 관리하는 것
- 모든 components에서 접근할 수 있으며, 프로젝트를 끄기 전까지 값이 날아가지도 않는다
- 전역변수를 쓸 때와 동일한 장단점을 가진다
- but, 많이 쓰면 안 됨. 메모리를 사용하는 것이기 때문. 꼭 필요한 경우에만 사용한다
[ Global State Package의 종류 ]
1. Redux
- 현재 시장에서 많이 사용하고 유명
- but, 매년 조사에서 가장 빠르게 없어질 패키지 1위로 꼽히고 있음
2. Recoil, Justand, jotai 등
- 그러나 당연히 이러한 패키지들 또한 리덕스에서 시작됐고, 리덕스의 단점을 보완하는 형태로 발전되었음
→ 그래서 리덕스를 먼저 공부하기로 하자.
Redux
[ Redux의 특징 ]
- Flux 구조 ( Store라는 가상의 공간을 만들어서, 그 스토어가 모든 것을 담당하게 하는 방식)
- React랑만 사용하는 것이 아님 (앵귤러, 뷰 등..)
- ⇒ so 추가적으로 리액트와 리덕스를 연결하는 패키지를 설치해줘야 한다.
- ⇒ npm install react-redux
[ Redux의 동작구조: Flux 구조 ]
1. Store.js
- State(현재상태)를 종합적으로 저장하는 공간
- 실질적으로 State를 관리하는 공간
2. Reducer.js
- component와 Store를 연결해주는 역할
- component는 무조건 Reducer를 통해서만 Store에 접근할 것. (직접접근 불가능)
3. Action.js
- component에서 Reducer에 부탁할 수 있는 명령어 목록을 적어놓은 데이터 덩어리
- 문법 형태 아니고, 그냥 정해놓은 규칙(개념)과 같음
이로써, component는 state에 직접 접근할 수 없게 되었고,
state를 조작하는 건 이제 Reducer로 완전히 옮겨갔다!!!!!
component는 Reducer를 통해 Store 안에 저장된 state를 사용할 수 있게 되었다.
[ Redux 사용으로 인한 효과 ]
⇒ 더이상 의미 없는 부모 컴포넌트를 만들 일 없음!
⇒ props 지옥이 사라짐!
⇒ 그리고 덕분에 리랜더링 최적화가 더 잘 되게 되었음!
리액트에서 Redux를 사용하는 방법에 대해 알아보자.
Redux는 리액트에서만 사용 가능한 패키지가 아니다. 뷰..등 많은 곳에서 사용 가능하다.
그래서 설치할 때 다음의 두 명령어를 사용한다.
npm install redux
npm install react-redux
index.js >>
기존 <App /> 컴포넌트를 <Provider></Provider> 컴포넌트로 감싸준다.
src 폴더 > redux 폴더 생성
> action.js 파일 생성
(reducer에 전달하고자 하는 object를 선언하고 return 해준다)
> reducer.js 파일 생성
1. 초기 State를 선언해준다
2. Reducer를 선언해준다
3. store를 선언해준다
즌쯔 이해하는 데 넘 어려웠다......
그림 그리고 몇 번이고 듣고, 읽고, 말해보니 이제야 약간 윤곽이 잡히는 듯하다.
직접 만들어보며 더 익혀보는 수밖에...........유유.. 화이띵@
'📚 Educations > ⏳ StageUs' 카테고리의 다른 글
2024년 02월 01일 비동기함수와 비동기처리, Promise-then, async-await, 백엔드 연결 (0) | 2024.02.02 |
---|---|
24년 01월 18일 심화과정#6 Recoil, Styled-component (0) | 2024.01.19 |
24년 01월 04일 심화과정#4 CRA (1) | 2024.01.05 |
23년 12월 28일 심화과정#3 Virtual DOM, Hook, State.. (0) | 2023.12.30 |
23년 12월 21일 심화과정#2 JSX (리액트의 문법) (0) | 2023.12.21 |