컴포넌트의 Props를 일부 오버라이드하면서 인터페이스를 바꾸고, 컴포넌트가 동일한 ref를 갖게(re-render 가능하게) 해주는 훅을 만들어보자. Implementation export default function useInjectedProps(_Component: C, injectedProps: I) { // 훅의 인자로 받은 컴포넌트를 저장합니다. const Component = useRef(_Component); // 상태 변경이 일어나면서 컴포넌트 호출이 일어날 경우 injectedProps가 컴포넌트로 자연스럽게 주입 될 수 있게 합니다. Component.current = (props: Omit) => { ret..

간단한 validation 기능을 가진 input 컴포넌트를 만들어보자. InputWithValidation.tsx import React, { ComponentPropsWithRef, useEffect, useRef } from 'react'; /** 유효성 검증에 사용할 메시지 타입을 aliasing */ type InvalidMessage = string; /** * InputValidator는 value를 검증하고, 검증에 실패하면 메시지를 반환한다. * void는 return undefined, return, 아무것도 return 하지 않는 모든 경우에 대응한다. */ export type InputValidator = (value: string) => InvalidMessage | void; ..

어떤 기술을 맨날 사용하다보면, 스스로가 잘 알고 있다고 착각을 하기 쉽다. 늘 경계하고 '정말 잘 알고 사용하고 있는가? 누구에게 설명할 수 있을 정도로 알고 있는가?' 에 대한 질문을 스스로에게 던지는게 중요한 것 같다. 스스로가 잘 알고 있다고 생각하는 부분은 공부를 소홀히 하게 되기 마련이니까... 오늘은 react hooks 를 간단하게 직접 만들어봤다. 단일 state 및 effect deps를 관리하는 singleton 방식의 react, hooks 배열을 통해 조금 더 실제 react hooks와 비슷하게 구현한 방식으로 만들었다. 첫 번째 예제는 hook의 작동방식과 closer의 연관성에 대해 이해하기에 좋은 것 같고, 두 번째 예제는 'hooks는 마법이 아니라 배열일 뿐' 이라는 말..

표(Table)을 만들 때 사용하는 코드 (1편) 코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 nookpi.tistory.com 표(Table)을 만들 때 사용하는 코드 (2편) 표(Table)을 만들 때 사용하는 코드 (1편) 코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. reac nookpi.tistory.com 기존 사용 방법에서 볼 수 있었듯, 테이블의 한 열(row)에는 한 개 혹은 두 개의 열(cell)이 들어올 수 있다..

표(Table)을 만들 때 사용하는 코드 (1편) 코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 nookpi.tistory.com 저번 포스팅에선 리턴해야 하는 결과물과 요건, 그리고 실제 구현을 위해 사용된 jsx 코드에 대해 살펴보았다. 이번 시간에는 TableTitle 컴포넌트와 Table컴포넌트를 살펴보자. TableTitle 컴포넌트 코드는 다음과 같다. // * WithChildren 인터페이스는 컴포넌트가 받을 수 있는 자식 요소에 대한 정보를 정의합니다. interface WithChildren { //* 자식 요소는..

코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 결과물은 다음과 같다. 고려해야 할 조건은 아래의 10개 정도로, 꽤 많다. 표의 각 셀은 제목과 내용으로 이루어져 있음 제목과 내용은 기본적으로 텍스트(string)가 온다고 가정하지만, 경우에 따라 어떤 요소든 받을 수 있어야 함 한 행에는 1개 혹은 2개의 셀이 올 수 있음 행의 높이는 가장 내용이 많은 셀 기준으로 맞춰짐 (수직정렬은 가운데) 행에 셀이 1개 인지 2개 인지에 따라 셀의 크기가 달라짐 (전체 너비의 100% / 50%) 표의 너비는 컨테이너의 너비에 따라 반응형으..