Hook
useInjectedProps
컴포넌트의 Props를 일부 오버라이드하면서 인터페이스를 바꾸고, 컴포넌트가 동일한 ref를 갖게(re-render 가능하게) 해주는 훅을 만들어보자. Implementation export default function useInjectedProps(_Component: C, injectedProps: I) { // 훅의 인자로 받은 컴포넌트를 저장합니다. const Component = useRef(_Component); // 상태 변경이 일어나면서 컴포넌트 호출이 일어날 경우 injectedProps가 컴포넌트로 자연스럽게 주입 될 수 있게 합니다. Component.current = (props: Omit) => { ret..
[React] 주니어 개발자의 커스텀 훅 NPM 배포 후기
ryan-custom-hooks react custom hook made by Ryan www.npmjs.com GitHub - Jonghakseo/ryan-custom-hooks: ryan's custom hook ryan's custom hook. Contribute to Jonghakseo/ryan-custom-hooks development by creating an account on GitHub. github.com 축) 커스텀 훅 드디어 배포 자주 사용하는 나만의 커스텀 훅을 만들어서 배포하고 싶은 생각이 있었는데, 문서화 작업이나 컴파일 작업 등의 환경을 만들기 귀찮다는 핑계로 미루고 있었다. 그러다가 이러한 귀찮은 작업들을 다 해놓은 템플릿을 깃헙에서 발견하고 바로 만들게 되었다. Git..
라이브러리 없이 typescript/reactHook 으로 다국어 지원하기
리액트 라이브러리 중 다국어를 지원하는 라이브러리는 물론 많지만, 간단한 랜딩 페이지 제작에서까지 라이브러리를 사용하기엔 뭔가 귀찮은 부분이 있다. 오늘은 간단하게 react hook 과 typescript만을 사용해서 자동완성 기깔나게 지원하는 다국어 지원 기능을 뚝딱 만들어보자 먼저, 예제에서 지원하는 언어셋은 한국어, 영어라고 가정하자 언어 타입을 만든다. export type LanguageType = "ko" | "en"; 언어셋을 담을 자바스크립트 파일도 하나 만든다. /constants/lang.ts const STRING_ESSETS = { MAIN_TITLE: { ko: "훅을 사용한 다국어 예제입니다.", en: "useMuiltilingual Example" }, SUB_TITLE: ..