서로 다른 컴포넌트에서 호출한 커스텀 훅이 지니는 개별성
·
JS & REACT
회원 가입 관련 form에서 동작하던 state와 통신 함수를커스텀 훅으로 분리해 운영했을 때,클릭 이벤트 핸들러에서는 state와 통신이 정상 동작했지만키보드 이벤트 핸들러에서는 통신이 이뤄지고 state의 변경은 되지 않는 오류가 있었습니다.문제 발생 이유: 커스텀 훅의 mutation 함수를 서로 다른 곳에서 참조를 통해 사용했기 때문입니다.한 마디로 하나의 함수로 동작한 것이 아닌 서로 다른 2개의 함수가 각자 동작한것인데요.React 공식 문서의 커스텀 훅 만들기 파트를 보면 자세히 알 수 있습니다.Q.사용자 정의 Hook은 어떻게 독립된 state를 얻는 건가요?A. 각각의 Hook에 대한 호출은 서로 독립된 state를 받습니다.useFriendStatus를 직접적으로 호출하기 때문에 Rea..
Next.js getStaticPaths
·
TIL
토이프로젝트에서 동적 라우팅을 적용하며 Next.js의 기초인 getStaticPath와 getStaticProps에 대해 복습하며 정리를 해보았다. getStaticPath와 getStaticProps getStaticPaths는 페이지의 경로를 정적으로 생성한다. Yarn build로 next project를 빌드할 때 getStaticProps 내부의 API로 받은 또는 json으로 받은 데이터를 확인한 후 필요한 모든 경로에 대해 페이지를 프리 렌더링 해둘 수 있도록 해주는 역할을 한다. 또한 getStaticProps도 빌드 타임에 동작하므로 모든 경로에 대한 페이지가 미리 만들어져있게 된다. 하지만 빌드가 끝난 뒤 DB에 새로운 교회가 추가될 수 있는데, 그럴 때마다 next 전체를 빌드해서 ..