24.08.20 개인과제 회고

 

 

 

나만의 포켓몬 선택하기

나만의 포켓몬 선택하기 - 깃허브

 

이번 프로젝트는 포켓몬 리스트에서 내가 원하는 포켓몬을 선택하는 페이지를 만드는 것이었다.

 

처음엔 props drilling으로 state를 관리하고, 그 다음으론 Context API를 사용하여 상태관리를 하고, 다음으론 redux toolkit을 사용하여 전역 상태관리를 하도록 리팩토링하였다.

 

props drilling은 확실히 불편하다. 원하는 상위 컴포넌트에서 state와 handler을 만들고, 자식으로 쭉 내려줘야하다보니, 데이터 변경에 따른 흐름을 예측하기 어렵기도 하고, depths가 깊어질수록 더욱 파악이 어려워 진다.

 

반면, props drilling에서 Context로 리팩토링하며, 훨씬 편하다는 것을 느꼈다.

자식 컴포넌트에게 직접적으로 props를 내려주지 않아도 되기 때문에 데이터 흐름을 예측하기 쉬워졌으며, 코드의 유지보수도 훨씬 쉬워졌다.

 

그리고 Context에서 redux toolkit으로 넘기며 분명 다르다는 것은 느꼈다. Context는 해당 데이터 뭉치를 어느 컴포넌트가 공유할 것인지 선택하고, 공유하는 컴포넌트에서만 context에서 데이터를 가져오도록 설정할 수 있다. 하지만, 프로젝트의 크기가 커질수록 데이터가 여기저기서 많이 사용되고 그러다보면 관리가 어려워질 것이라고 생각한다.

그래서 전역상태관리 라이브러리들이 더 인기가 많아지는 것 같다. 프로젝트의 크기가 커질수록 어디서 어떤 데이터를 사용할지 어떤 리듀서를 사용해야하는지 헷갈려지기 때문에, 중앙 저장소 store에 모아두고, 원하는 데이터만 가져와서 보여주거나, 원하는 동작의 리듀서만 가져와서 dispatch를 한다.

코드를 작성할때는 크게 다른점을 느끼지 못했지만, 작업을 끝내고나니 뭔가 느낌이 오는것도 같다.

 

---

이전에 아티클을 읽었을 때 컴포넌트 관련 문장을 읽은 적이 있다.

"컴포넌트 기반 아키텍처를 설계할 때는 구성 요소 간의 의존성을 최소화하고, 각 컴포넌트는 한 가지 책임만 진다는 단일 책임 원칙을 염두에 두어야 합니다."

처음 들었을 때는 의존성? 단일책임원칙? 뭔소린지 이해가 안갔다.

아직도 의존성에 대한 이해는 완벽하지 않지만, 단일책임원칙은 이해가 간다.

물론 모든 컴포넌트가 딱 한가지의 일만 하도록 만들지는 못하겠지만, 최소한의 책임만 지도록 하자는 것. 그정도로 이해를 했다.

import React from 'react'

const Input = ({value, setValue, type}) => {
    const onChangeHandler = (e) => {
        type === 'text' ? setValue(e.target.value) : setValue(Number(e.target.value))
    }
  return (
    <input type={type} value={value} onChange={onChangeHandler}/>
  )
}

export default Input

여태까지 의존성을 저 props들 자체로 생각했다. 자식 컴포넌트가 부모 컴포넌트에서 내려준 props에 의존하는 것이다. 라고 생각했던 것이다.

하지만 의존성을 최소화 하라는 말은 위의 onChangeHandler처럼 props로 내려준 type에 크게 의존하여 컴포넌트의 행동에 제약을 걸지 말라는 뜻 같다.

 

과제는 끝났지만, 어떤걸 남은시간동안 공부할지 고민이다.

1. 개인과제에 supabase를 이용해 회원가입, 로그인 기능 구현하기

2. Next.js 공부하기

3. 리액트 테스트코드 공부하기

1과 2는 캠프 커리큘럼에 포함되어있고, 예습을 한다는 생각으로 진행해야 할 것이고, 테스트코드는 미래를 봤을 때 좋은 선택일 것 같다.

테스트코드쪽으로 마음이 기울긴 하는데, 일단 좀 더 고민해봐야 할 것 같다.