컴포넌트 상태 관리를 어떻게 할것인지에 대해서 (전역관리)

기능 구현

---

1. 평수, 주거형태, 스타일을 Select로 선택할 수 있어야 한다.
2. 사진을 가져올 수 있어야한다.
3. 공간 선택 Select을 선택할 수 있어야한다.
4. 내용설명란을 만들어야한다.
5. 태그를 쓸 수 있어야한다.
6. 2~5번까지의 기능을 사진을 넣을 때마다 때로 구분을 지어주어야 한다.

구조의 복잡성

---

사진 올리기, 공간 선택, 내용입력, 키워드 정보를 하나의 세트로 운영해야된다. 그리고 추가하기 버튼을 클릭하면

해당 내용에 대해 새롭게 추가되고 기존 기능들이 다시 적용되어야했다.

처음에는 props를 이용해서 데이터를 각각 컴포넌트에서 가져오도록 했는데, 이렇게 진행을 하니 코드의 복잡성이 증가하고 가독성 또한 좋지 않았다. 내가 만든 코드인데도 해석하기 어려울 정도???

처음 구성은 useState를 객체를 담고있는 배열 구조로 만들어서 각각의 내용이 변경될 때마다 값을 바꿔 주려 했다.

문제 1 : 렌더링을 일으켜야 할까?

• useState에 담긴 내용이 많을 수록 렌더링이 일어나는 횟수가 증가할 것이다. 렌더링이 필요하지않은 useRef를 이용해서 필요한 정보를 담자.

문제 2: 기능이 많아지니까 props가 많아진다.

• 각각의 기능을 관리하기 위해서 post.jsx라는 페이지에서 useRef를 생성하고 props로 내려줘야했다. 기능이 많아지는 만큼 props의 갯수도 증가해서 코드가 복잡해지는 문제가 발생. → redux를 사용해 전역으로 관리

전역관리 Redux

---

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  boards: [
    {
      img: '',
    },
  ],

  contents: [],

  mainUrl: '',

  result: [],
};

const boardSlice = createSlice({
  name: 'BOARD_SLICE',
  initialState,
  reducers: {
    addBoards: (state, action) => {
      state.boards = [...state.boards, action.payload];
    },
    initBoards: (state, action) => {
      state.boards = [action.payload];
    },

    addContents: (state, action) => {
      state.contents = action.payload;
    },

    initState: (state, action) => {
      state.boards = [
        {
          img: '',
        },
      ];
      state.contents = [];
    },

    addMainUrl: (state, action) => {
      state.mainUrl = action.payload;
    },

    addDetailBoard: (state, action) => {
      state.result = [...state.result, action.payload];
    },
  },
});

export const {
  addBoards,
  initBoards,
  addContents,
  initState,
  addMainUrl,
  addDetailBoard,
} = boardSlice.actions;
export default boardSlice.reducer;

전역관리를 통해서 다음과 같이 객체 형태로 state를 관리하게 했고, 내용이 추가되게 해두었다.

회고

---

props 만으로 전체적 상태관리를 한다는 것은 어렵다고 느꼈다. 그렇기에 Redux라는 상태관리 라이브러리를 썼다. 지금와서 드는 생각이지만 이렇게 작은 내용을 적용할 때는 Redux 보다는 Context API를 사용해보는 것도 어땠을까 싶긴하다. Redux가 flux 패턴이 정해져 있어서 이해하기는 쉽겠지만, 작은 상태관리는 Context API를 사용해도 좋을거같다.

기능 구현

---

1. 평수, 주거형태, 스타일을 Select로 선택할 수 있어야 한다.
2. 사진을 가져올 수 있어야한다.
3. 공간 선택 Select을 선택할 수 있어야한다.
4. 내용설명란을 만들어야한다.
5. 태그를 쓸 수 있어야한다.
6. 2~5번까지의 기능을 사진을 넣을 때마다 때로 구분을 지어주어야 한다.

전체 사진

반복이 필요한 사진

구조의 복잡성

---

사진 올리기, 공간 선택, 내용입력, 키워드 정보를 하나의 세트로 운영해야된다. 그리고 추가하기 버튼을 클릭하면

해당 내용에 대해 새롭게 추가되고 기존 기능들이 다시 적용되어야했다.

처음에는 props를 이용해서 데이터를 각각 컴포넌트에서 가져오도록 했는데, 이렇게 진행을 하니 코드의 복잡성이 증가하고 가독성 또한 좋지 않았다. 내가 만든 코드인데도 해석하기 어려울 정도???

처음 구성은 useState를 객체를 담고있는 배열 구조로 만들어서 각각의 내용이 변경될 때마다 값을 바꿔 주려 했다.

문제 1 : 렌더링을 일으켜야 할까?

• useState에 담긴 내용이 많을 수록 렌더링이 일어나는 횟수가 증가할 것이다. 렌더링이 필요하지않은 useRef를 이용해서 필요한 정보를 담자.

문제 2: 기능이 많아지니까 props가 많아진다.

• 각각의 기능을 관리하기 위해서 post.jsx라는 페이지에서 useRef를 생성하고 props로 내려줘야했다. 기능이 많아지는 만큼 props의 갯수도 증가해서 코드가 복잡해지는 문제가 발생. → redux를 사용해 전역으로 관리

전역관리 Redux

---

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  boards: [
    {
      img: '',
    },
  ],

  contents: [],

  mainUrl: '',

  result: [],
};

const boardSlice = createSlice({
  name: 'BOARD_SLICE',
  initialState,
  reducers: {
    addBoards: (state, action) => {
      state.boards = [...state.boards, action.payload];
    },
    initBoards: (state, action) => {
      state.boards = [action.payload];
    },

    addContents: (state, action) => {
      state.contents = action.payload;
    },

    initState: (state, action) => {
      state.boards = [
        {
          img: '',
        },
      ];
      state.contents = [];
    },

    addMainUrl: (state, action) => {
      state.mainUrl = action.payload;
    },

    addDetailBoard: (state, action) => {
      state.result = [...state.result, action.payload];
    },
  },
});

export const {
  addBoards,
  initBoards,
  addContents,
  initState,
  addMainUrl,
  addDetailBoard,
} = boardSlice.actions;
export default boardSlice.reducer;

전역관리를 통해서 다음과 같이 객체 형태로 state를 관리하게 했고, 내용이 추가되게 해두었다.

회고

---

props 만으로 전체적 상태관리를 한다는 것은 어렵다고 느꼈다. 그렇기에 Redux라는 상태관리 라이브러리를 썼다. 지금와서 드는 생각이지만 이렇게 작은 내용을 적용할 때는 Redux 보다는 Context API를 사용해보는 것도 어땠을까 싶긴하다. Redux가 flux 패턴이 정해져 있어서 이해하기는 쉽겠지만, 작은 상태관리는 Context API를 사용해도 좋을거같다.