인생은 효율성

핸들러와 관리해야 할 상태 값이 많아질수록 반복적인 코드들로 핸들러와 관리해야 할 상태 값이 많아지면 반복되는 코드들이 자리를 차지하게 된다. 컴포넌트를 5개 썼을 뿐인데도 벌써 코드가 저만큼이다. 비효율적인 작업을 하고 있다는 생각이 들어서 공통되는 부분을 하나로 묶기로 했다. 처음엔 useState와 핸들러를 하나만 사용하는 방식을 이용했는데 최적화를 생각하다 보니 이것도 좋은 방법이 아니었다. 그래서 커스텀 훅을 만들었다. useInput.tsx const useInput = (initValue: any) => { const [value, setValue] = React.useState(initValue); const onChange = (e: any) => { setValue(e.target.va..

즐겨찾기 메뉴와 메인 메뉴로 이루어진 상단 내비게이션 바를 만드는 도중 문제가 생겼다. 메인메뉴(하위메뉴)에서 별 아이콘을 클릭하면 즐겨찾기 추가/삭제가 정상 동작 한다. 하지만 즐겨찾기 메뉴에서 별 아이콘을 클릭하면 메인메뉴에 변경 내용이 즉각 반영이 안 되는 것. 새로 고침을 하면 그제야 변경한 내용이 적용되는 걸 보고 프론트의 문제란 걸 알았다. 즐겨찾기와 메인 메뉴 둘 다 빌드될 때 DB에서 한번 불러오고 mobX로 store에서 관리하고 있다. 별 아이콘은 FavIcon 컴포넌트를 만들어서 메뉴마다 넣어주고 있다. store.tsx //메인메뉴 @observable mainMenus: IMainMenus[] = []; //즐겨찾기메뉴 @observable favMenus: IFavMenus[] ..