코반주반
useInjectedProps
컴포넌트의 Props를 일부 오버라이드하면서 인터페이스를 바꾸고, 컴포넌트가 동일한 ref를 갖게(re-render 가능하게) 해주는 훅을 만들어보자. Implementation export default function useInjectedProps(_Component: C, injectedProps: I) { // 훅의 인자로 받은 컴포넌트를 저장합니다. const Component = useRef(_Component); // 상태 변경이 일어나면서 컴포넌트 호출이 일어날 경우 injectedProps가 컴포넌트로 자연스럽게 주입 될 수 있게 합니다. Component.current = (props: Omit) => { ret..
InputWithValidation
간단한 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 직접 구현해보기
어떤 기술을 맨날 사용하다보면, 스스로가 잘 알고 있다고 착각을 하기 쉽다. 늘 경계하고 '정말 잘 알고 사용하고 있는가? 누구에게 설명할 수 있을 정도로 알고 있는가?' 에 대한 질문을 스스로에게 던지는게 중요한 것 같다. 스스로가 잘 알고 있다고 생각하는 부분은 공부를 소홀히 하게 되기 마련이니까... 오늘은 react hooks 를 간단하게 직접 만들어봤다. 단일 state 및 effect deps를 관리하는 singleton 방식의 react, hooks 배열을 통해 조금 더 실제 react hooks와 비슷하게 구현한 방식으로 만들었다. 첫 번째 예제는 hook의 작동방식과 closer의 연관성에 대해 이해하기에 좋은 것 같고, 두 번째 예제는 'hooks는 마법이 아니라 배열일 뿐' 이라는 말..
표(Table)을 만들 때 사용하는 코드 (3편)
표(Table)을 만들 때 사용하는 코드 (1편) 코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 nookpi.tistory.com 표(Table)을 만들 때 사용하는 코드 (2편) 표(Table)을 만들 때 사용하는 코드 (1편) 코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. reac nookpi.tistory.com 기존 사용 방법에서 볼 수 있었듯, 테이블의 한 열(row)에는 한 개 혹은 두 개의 열(cell)이 들어올 수 있다..
표(Table)을 만들 때 사용하는 코드 (2편)
표(Table)을 만들 때 사용하는 코드 (1편) 코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 nookpi.tistory.com 저번 포스팅에선 리턴해야 하는 결과물과 요건, 그리고 실제 구현을 위해 사용된 jsx 코드에 대해 살펴보았다. 이번 시간에는 TableTitle 컴포넌트와 Table컴포넌트를 살펴보자. TableTitle 컴포넌트 코드는 다음과 같다. // * WithChildren 인터페이스는 컴포넌트가 받을 수 있는 자식 요소에 대한 정보를 정의합니다. interface WithChildren { //* 자식 요소는..
표(Table)을 만들 때 사용하는 코드 (1편)
코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 결과물은 다음과 같다. 고려해야 할 조건은 아래의 10개 정도로, 꽤 많다. 표의 각 셀은 제목과 내용으로 이루어져 있음 제목과 내용은 기본적으로 텍스트(string)가 온다고 가정하지만, 경우에 따라 어떤 요소든 받을 수 있어야 함 한 행에는 1개 혹은 2개의 셀이 올 수 있음 행의 높이는 가장 내용이 많은 셀 기준으로 맞춰짐 (수직정렬은 가운데) 행에 셀이 1개 인지 2개 인지에 따라 셀의 크기가 달라짐 (전체 너비의 100% / 50%) 표의 너비는 컨테이너의 너비에 따라 반응형으..
코반주반 (코드 반 주석 반) 포스팅 시작
작성한 코드를 한 줄 한 줄 주석을 달면서 스스로 리뷰하는 포스팅을 해보려 합니다. 항상 느끼지만, 다른 사람의 코드를 읽을 때 한 줄 한 줄 해석하고 읽다보면 결국 읽히지 않는 코드는 없다고 생각합니다. 저질의 포스팅을 남발하며 느끼는 죄책감을, 주석을 달아 다른 사람에게도 쉽게 읽히는 코드를 포스팅 함으로써 조금이나마 덜어보고자 합니다. 피드백은 언제든 환영합니다. 사족으로, 짭플린이 1.4버전으로 업데이트 되었습니다. zzaplin도 많은 이용 부탁드립니다. Ryan's ZZaplin Layout visualizer like a Zeplin chrome.google.com