POB_TIL 0518

이지훈·2022년 5월 18일
0

프리온보딩_TIL

목록 보기
12/22

저번 강의

useMemo에 대해

useMemo, useCallback이 굉장히 연산이 많은 경우가 아니면 크게 의미 없다는 의견도 있지만 어제 강의에서는 코드를 짜며 더 깊이 생각하기 위해 의도적으로 사용하기도 한다고 했다. 이들은 두번째 인수로 dependencies 배열을 넘겨주는데, 이를 작성하면서 어떤 값들이 사용되는지 알고 props를 최소한으로 최적화시키도록 계속 신경쓰는것이다.

그리고 props의 경우 2~3단계 이상을 들어가선 안된다고 했다. 그 이상의 경우는 불필요한 코드 작성이 많고 상태관리도구들을 통해 해결할 수 있기 때문인 것 같다.

container - presentation

이 패턴은 Hoc라는 이름으로도 알려져있고 리액트를 검색하다보면 굉장히 자주 봤던 패턴이다. 하지만 이 패턴은 사실상 custom hook이 나오며 의미없어졌다고 한다. 로직과 렌더링 부분을 분리하는 목적은 custom hook을 통해 해결가능하고 컨테이너를 분리하는게 의미없는 코드를 많이 만들어내기 때문이다.

시간이 없어서

파일이 적절하게 분리되지 않고 장황하고 가독성이 나쁜 코드를 만들게 되면 대부분 시간이 없어서라고 급하게 하느라 그랬다고 말하지만 실제로는 그렇지않다. 오히려 이런것들을 하지 않고 하는 게 더 오래걸리고 그 시간에 파일과 컴포넌트를 적절히 분리하고 작성하는게 더 효율적이다. 그리고 작게 나누는것이 중요하다고도 하셨다. 이걸 못하면 프론트엔드개발 하기 힘들다고 할정도로. 지금당장보다도 조금만 지나면 코드양이 많아지기때문에 유지보수를 위해서라도 꼭 해야겠다.

redux-toolkit

redux-toolkit을 사용해봤다.

이전에 redux를 사용해본적은 있는데 그 당시 보일러플레이트가 상당히 많았던 것으로 기억한다. react-redux를 사용해서 어느정도 편하게 사용할 수는 있었지만 그렇다해도 액션, 타입, 리듀서들을 정의하고 ducks 패턴으로 이를 한 파일에 모은다 하더라도 코드가 길어지는게 눈에 보였다. 또 양이 많아지면 일일이 다른 파일로 나눠야하는데 그럼 관리할 일도 더 많아졌다.

이런 단점들을 보완하고 더 간결한 코드로 사용할 수 있게 만든 것이 redux-toolkit이라고 생각한다.

redux-toolkit은 액션 타입 초기값 리듀서 등을 createSlice라는 함수 하나로 모두 정의할 수 있다. slice가 무슨의미인진 모르겠지만 모든걸 포함하는 reducer 느낌이다.

적용

createSlice를 통해 name, initialState, reducers를 설정해준다.
reducers에는 액션과 reducer 동작을 넣어준다

const systemSlice = createSlice({
  name: 'system',
  initialState: INITIAL_STATE,
  reducers: {
    setTodoList: (state: TodoState, action: PayloadAction<ITodoItem[]>) => {
      state.todoList = action.payload
    },
  },
})


export const { setTodoList } = systemSlice.actions

export default systemSlice.reducer

export const getTodoList = (state: RootState): ITodoItem[] => state.todo.todoList

실제 컴포넌트에서 사용할 때는 react-redux의 useDispatch, useSelector를 사용해준다.
typescript 환경에서는 이들을 각각 타입을 적용하여 래핑하여 사용한다. 이름은 useAppDispatch, useAppSelector로 사용한다.

const dispatch = useDispatch()
const todoList = useAppSelector(getTodoList)
dispatch(setTodoList(newTodoItems))

간편해서 좋다.

profile
안녕하세요! 대학교 졸업한 이지훈입니다.

0개의 댓글