[24.08.13] 개인프로젝트 5일차 - 올림픽 메달 트래커 만들기

어제 개인 프로젝트를 마무리하고 오늘은 개인공부를 진행하려했는데..

컴포넌트 분리에대한 가이드를 준다하셔서 갔다가 수정하고싶은 부분이 잔뜩 생겼다

 

우선 아직 배우지 않은 리액트 기능들이 많은 상태에서 우선적으로 고려하길 추천받은 부분은 아래와 같았다.

1. 메인 비즈니스 로직(지금 add, update, delete)이 한 곳에 잘 모여있어야한다 (한눈에 잘 보임, 이후 커스텀 훅으로 관리하기 쉬움)

2. state와 state를 관리할 로직들은 모아둔다

 

그리고 당장 적용을 권하진 않으셨지만 나중에 해보고싶은 것

1. 입력을 받는 기능들은 Input 과 같이 html 태그 기본 기능에 의존하게 된다. 이럴 때 범용적으로 사용할 수 있는 Input 컴포넌트를 만들어두면 활용하기 좋다

function Input ({type, inputHandler, ...rest}) {
  return <input type={type} onChange={inputHandler} {...rest}></input>
}

function MedalInput({inputHandler}) {
  return <Input type="text" inputHandler={inputHandler} placeholder={~~~}/>
}

위와 같이 태그를 감싸는 컴포넌트를 만들어 기본 기능을 사용하되 이벤트 발생시 실행할 동작, 기타 상황에따라 필요한 속성들만 지정하면 사용할 수 있게 해주는 것이다. 

 

 

수정한 부분

1. 하나의 state와 연관된 동작들을 그 state가 있는 상위 컴포넌트로 옮기고 props 정리

- 그 state와 연관된 동작들을 확인하기 쉬워짐

- props가 많았던 컴포넌트들은 handler만 전달하면서 props가 많이 정리됨

 

2. 상위 컴포넌트로 옮기다보니 너무 커져 util.js를 만들었다

- 정렬, 유효성검사를 util.js에 옮겨 필요한 곳에서 import해 사용하였다.

 

3. App 내부 세부 컴포넌트들을 감싸는 MedalSection 컴포넌트 생성 / AddButton, UpdateButton 분리

- 국가 추가, 업데이트 버튼이 처음에는 데이터에 접근해 갱신한다는 점에서 같은 컴포넌트라 생각했는데, 내부에서 세세하게 닫ㄹ라지는 부분들을 if문으로 확인하다보니 내부 로직이 복잡해졌었다. 당장 우선순위가 아니라고 생각했는데 튜터님께서 둘은 확실히 다른 역할이라고 분리하는게 맞다고 하셔서 state를 옮기면서 같이 정리했다.

 

초반에 정리했던 컴포넌트랑 현재 컴포넌트 상태이다.

그래도 그렇게 많이 달라졌다고는 생각 안했는데 생각보다 많이 바꼈다..

 

4. 빈칸 입력하지 않도록 정규식 이용해 검사, 단순 연산을 처리하는 함수는 사용하는 곳에 바로 로직 작성, 입력되지 않은 국가에 대해 업데이트를 시도할 때 alert 등 고려하지 못한 부분들을 보강했다.