TIL-23.04.18

 

리덕스 (Redux)

 

 

문제점

컴포넌트에서 컴포넌트로 State를 보내기 위해서는 반드시 부-모 관계여야한다.

이로 인해서 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 중간 부모컴포넌트를 거쳐야만 한다는것!

정작 부모컴포넌트에서는 그 값이 필요가 없어도 말이다..

props로 일일이 전달해주는게 번거롭다 생각했던 차에 리덕스라는 도구를 알았고, 익히기 시작했다

 

 

 

 

시도한점 && 해결

리덕스를 익히면서 Global state(전역상태)의 개념을 익혔다. 그동안 컴포넌트에서 useState를 이용해서 생성한 Local state(지역상태)의 개념만 머리속에 있었는데, state를 중앙에서 모두 접근가능하게끔 만들어주는 리덕스를 사용하니, 불필요한 props전달을 안해도되었다

즉, 중앙 state 관리소에서 state를 생성하고, 어떠한 컴포넌트에서 state가 필요하다면 컴포넌트의 위치에 상관없이 바로 불러와서 사용할수있다

const todoSlice = createSlice({
  name: 'todo',
  initialState: initialTodoState,
  reducers: {
    add: (state, action) => {
      state.push({
        id: id++,
        title: action.payload.title,
        content: action.payload.content,
        isDone: false,
      });
    },

리덕스를 더 편리하게끔 해주는 툴킷을 이용한 코드이다.

createSlice 메소드를 이용해 각 state별로 생성할수있으며, 각 state에 활용할수있는 reducer들 또한 만들어 필요한 컴포넌트에서 언제든지 불러와 사용할수있다

const state = useSelector((state) => state.todo);

이런식으로 state가 필요한 컴포넌트에서 useSelctor 메소드를 이용해 global state에서 언제든지 가져와 사용만 하면된다!

물론 처음 접한 개념과 메소드들이라 사용하기에 아직은 서툴다..

하지만 그동안 리액트를 사용해오며 겪었던 여러가지 불편함(props전달은 반드시 부모관계를 거쳐야한다는것, 이로인해 데이터가 쓰이지않는 컴포넌트에까지 전달해줘야한다는것, 자식->부모 props전달은 따로 함수를 만들어야할 정도로 번거롭다는것 등등)을 한번에 해결해주는 놈이라 반드시 능숙하게 사용하게끔 내 자신을 만들어 놓을것이다

 

 

 

알게된점

변수를 사용해야 할 일이 있으면 반사적으로 useState를 먼저 치지말자..

어떻게 state를 컴포넌트에 공급하는게 좋을지 미리 생각하고, 프로젝트 내에서 통일해 사용해보자!