즐거운 월요일......

Redux

리덕스 개념 정리

리덕스에는 리듀서 액션 스토어 어쩌고 있는데...

리액트 => 컴포넌트 덩어리
컴포넌트로 쪼개는 게 리액트의 특징이라면 특징인데, 거기서 오류 하나가 난다? 컴포넌트가 백만개면 백만개 다 뒤져야 하는 불상사가 생긴다.
그래서 상태는 중앙에서 다 관리하기로 한다. 이게 리덕스임

근데 중앙 관리만 하고 함수는 컴포넌트 별로 다 쪼개서 관리한다? 그랬더니 또 컴포넌트가 백만개인 프로젝트는 컴포넌트를 백만 개 뒤져야 하는 불상사가 또 생겼음... 그래서 함수도 중앙에서 관리하기로 함. 그 함수가 리듀서임.
근데 함수를 모~조리 리듀서라고 하냐?? 모든 함수 다 모아놓냐?
아니다... "상태 업데이트 로직을 포함"해야만 리듀서 함수임.

그래서 상태가 왜... 어디서... 오류가 났지? 하면 딱 하나만 보면 되게 만들었다. 스토어 파일~~ -> 컴퓨터 : 스토어가 뭔데요? 라고 묻는다. 그래서 크리에이트 스토어 라는 함수를 쓴다.

자... 상태는 싹 다 스토어에서 관리하시죠. 하고 이제 저 리듀서 좀 씁니다~~ 하고 쓸 때 그냥 냅다 하면 되냐? 할 때 이것도 우리 통일 시킵시다 하고 리듀서 안에서 액션 생겨남. 뭐 바꿀 때 액션(얜 근데 객체임 그냥 외우면 됨) 쓴다.

⬇️

그럼 나머지 하위 컴포넌트는 저거 어떻게 쓰냐?
context api에서는 useContext 써서 가져왔다. 리덕스도 비슷함. 리덕스는 useSelector 쓰면 된다.

액션도 써야 해요 저는~~ 하면 이제 useDispatch 데리고 오고 dispatch로 쓰면 됨

정리
0-1. 스토어 파일
createStore
combineReducers (그냥 리듀서 복잡하면 사용하는 애)
모듈 스토어 연결

0-2. 모듈 파일
상태 관리
액션 밸류, 액션 크리에이터 (리듀서 안에서 뭔가 기능하게 해주려면 써야 함)
리듀서 (함수)

0-3. 하위 컴포넌트
useSelector
useDispatch

이게 리덕스다.
근데 이제 순수 리덕스는 잘 안쓰는데....

RTK

RTK : 앗 귀찮은데요 하고 합친 게 많다.

0-1. 스토어 파일
configureStore

0-2. 슬라이스 파일
상태 관리
createSlice

0-3. 하위 컴포넌트 (얜 똑같음)
useSelector
useDispatch

뭔가 한결 간결해진 게 보인다.

RTK 사용 방법

1. 리덕스 설치

yarn add redux react-redux

이것은 리덕스만 설치한 것이다. 나는 리덕스만 사용할 생각이 전혀 없다.

1-1. 리덕스 툴킷 설치

yarn add @reduxjs/toolkit

얘네 둘을 같이 다운 받고 싶다면 이렇게 하면 된다.

yarn add redux react-redux @reduxjs/toolkit

(리액트는 패키지 싸움이야.... ;ㅅ;)

2. 폴더 만들어~~~
   폴더는 src 내부에 만들면 된다.

2-1. redux 폴더 만들기
그냥 redux라면 -> config 폴더, modules 폴더가 있다.
RTK는 -> config 폴더, modules 폴더 slices 폴더가 있다.

3. config 폴더 안에 configStore 파일 만들기

import { configureStore } from "@reduxjs/toolkit";
import @@Reducer from "../slices/@@Slice";

// 컨피규어 스토어 {}, 리듀서라는 키 안에 또 {}
const store = configureStore({
  reducer: {
    @@: @@Reducer,
    // 다른 슬라이스가 있으면 추가하기
  },
});

export default store;

4. slices 폴더 안에 이제 필요한 slice 만들기

import { createSlice } from '@reduxjs/toolkit'

//슬라이스 안에 객체
const @@Slice = createSlice({
    name : '@@',
    initialState : 초기값
    reducers : {
        //이용한 함수
        함수이름1 : (state, action) => {
        //로직
        },
    }

})

//이용한 함수
export const { 함수이름1 } = expenseSlice.actions;
export default @@Slice.reducer;

이 정도면 기본 세팅은 다했... 나? 🧐

그냥 조그만 꿀팁

내가 RTK를 처음 쓰면서 헷갈렸던 거...

1. useState랑 RTK 상관 관계....

(리팩토링 기준)
useState를 사용해서 변수 관리했던 나 -> useState를 냅다 복사해서 slices 폴더에 가지고 왔는데 아니... 이걸 어디다 '그대로 넣어야' 하나 고민 했다.
놀랍게도 rtk를 쓰면 useState를 쓸 일이 딱히... 없음...^^... 복사해도 가지고 와서 쓸 일이 없다. 그걸 응용해서 만들어야 한다...
(*폼의 입력 값 상태나, 특정 컴포넌트에서만 사용되는 임시 상태 등은 여전히 useState로 관리하는 것이 적절할 수 있다.)

진짜 너무 헷갈렸는데, useState 그 자체를 reducer 함수로 만들어버린다고 생각하면 좀 편하다 ^.^

2. 함수

함수 다 가져와 ! (x)
스테이트 상태 변환하는 애들만 가지고 와 (o)

뭘 가지고 오고 뭘 안가지고 오고 헷갈려서 죽는 줄 알았다.

으흐흑 ................. 했는데 나도 모르겠다.............. 그냥 얼핏 감 잡은 거 더 적기로 한다......

3. action.payload

이거이거 뭔가 했는데 인자로 받은 값이다 ....

예를 들어서 어쩌고함수(3) 이러면 액션 개체에 payload : 3 이러고 들어가있다...

아니 나도 모르겠고 그냥 됐다 됐는데 넘 힘들고 슬프고 기운 빠진다 지피티가 한 거나 다름이 없다 리덕스를 다시 공부할 테야 그런데 오늘은 더 못하겠으니 자러가겠다. 내일은 더 잘될 것이다... useRef로 얼른 고쳐야지..

(아마도)

알고리즘

원하는 문자열 찾기

알파벳으로 이루어진 문자열 myString과 pat이 주어집니다. myString의 연속된 부분 문자열 중 pat이 존재하면 1을 그렇지 않으면 0을 return 하는 solution 함수를 완성해 주세요.

단, 알파벳 대문자와 소문자는 구분하지 않습니다.

function solution(myString, pat) {
    let lowerPat = pat.toLowerCase();
    let lowerMyString = myString.toLowerCase();
    let answer = lowerMyString.includes(lowerPat);    
    return answer ? 1 : 0
}

부분 문자열 이어 붙여 문자열 만들기
길이가 같은 문자열 배열 my_strings와 이차원 정수 배열 parts가 매개변수로 주어집니다. parts[i]는 [s, e] 형태로, my_string[i]의 인덱스 s부터 인덱스 e까지의 부분 문자열을 의미합니다. 각 my_strings의 원소의 parts에 해당하는 부분 문자열을 순서대로 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요.

function solution(my_strings, parts) {
    let answer = '';
    for (let i = 0; i <my_strings.length; i++) {
        answer = answer + my_strings[i].slice(parts[i][0], parts[i][1]+1)
    }
    return answer;
}