[sprint2] redux 설계

[ Redux 설계 ]

지난 2주 프로젝트 때 서버에서 받은 data 를 렌더링 할 때 setState 를 사용했었다. setState 의 비동기적인 특성 때문에 예외처리에 시간이 많이 소모되었고 억지로 동기적으로 만들기 위해 코드도 지저분해져 힘들었던 경험이 있었다. 또한 state 가 변경될 때마다 rerendering 되어 클라이언트의 자원이 낭비된다는 생각도 있었다. 때문에 이번 프로젝트에서는 Redux 를 사용하여 대부분의 상태관리를 하고 setState 의 사용을 최소화 하고자 하였다. Redux 와 react-native 를 연결하는 것은 어렵지 않았다. 하지만 Redux 에서 기획한 앱에 맞게 데이터 관리를 효율적으로 하기 위해선 많은 고민이 필요했다.

// 초기 redux 상태
const initialState = Map({
    user: Map({ email: null, password: null }),
    clothes: List([
        Map({
            item_id: null,
            image: null,
            type: List([]),
            category: null,
            buydate: null,
            price: null,
            brand: null,
            storage: null,
            season: Map({})
        })
    ])
})

처음엔 전체 옷 데이터를 하나의 키 (clothes)로 한꺼번에 관리하려고 했었다. 하지만 rendering 할 때 기획의도에 맞게 의류, 신발, 잡화등으로 분류하여야 했다.
전반적으로 의류,신발,잡화로 나누어 rendering 하거나 통계기능에 그대로 활용되는 부분이 많았다.
하나의 키로 관리하면 계속해서 filter 메서드를 사용하여 분류해줘야 했다.

어차피 분류시킬거면 처음부터 나눠서 관리한다면 분류를 하지 않아도 되어 효율적이라고 판단했고 여러개의 키로 분류하여 Redux 에서 state 를 관리하는 방향으로 결정하였다.

이후 의류아이템 추가화면을 구성하던 중 사용자가 data 를 입력하면 redux 에 넘겨주어야 했는데 입력하는 data 가 많았다. 많은 data 를 일일히 변수로 지정하고 argument 로 설정하는 것은 낭비라고 생각했다. 이에 객체로 한꺼번에 모아서 보내면 코드의 양을 줄이고 다른 팀원도 쉽게 이해할 수 있다고 생각했다. 사용자가 입력하는 data 를 관리하기 위해 임시저장을 의미하는 key 를 추가하여 관리하였다.

export const initialState = Map({
    clothing: List([

    ]),
    shoes: List([

    ]),
    accessories: List([

    ]),
    temporaryClothing: Map({
        item_id: null,
        image: null,
        category: Map(categoryObject),
        type: Map(typeObject),
        buydate: null,
        price: null,
        brand: null,
        storage: null,
        season: Map(seasonObject),
        isLoading: false,
    })

})

[ 협업시 주석의 필요성 ]

하지만 설계의도를 코드에 주석으로 작성하여 설명하지 않아 팀원이 제대로 이해를 할 수 없게 한 아쉬움이 있었다. 코드를 작성한 사람은 코드의 의미 및 의도를 알고있지만 코드를 작성하지 않은 사람이 볼땐 변수명, 함수명 만으로는 의미와 의도를 파악하기 힘들 수 있다는 생각을 하였다. 팀으로 프로젝트를 할 때는 변수, 함수명으로는 설명이 부족한 부분을 주석으로 남겨야함을 깨달았다.