현재 진행중인 사이드 프로젝트에서는 디자이너분들이 피그마에 작성해주신 디자인 시스템이 있습니다. 그리고 프론트엔드 개발자는 디자인시스템 스펙에 맞게 컴포넌트를 설계합니다. 저는 Dropdown 컴포넌트의 확장성 재사용성을 고려하여 컴포넌트를 설계하도록 노력하였습니다. 드랍다운 컴포넌트의 조건은 다음과 같습니다. 1. 특정 버튼(트리거)를 클릭하면 메뉴리스트박스가 아래로 내려오면서 렌더링 되어야한다. 2. 메뉴아이템의 특정 이벤트가 있다면 해당 이벤트가 수행되어야한다. 3. 어디서든 쉽게 사용가능 하도록 구현해야한다. 4. 커스텀 및 확장이 쉬워야 한다. 저는 이조건들에 맞는 디자인 패턴인 Compound pattern 을 사용하여 Dropdown 컴포넌트를 설계해보았습니다. 1.드랍다운 컴포넌트의 상태를..
채팅방을 생성하는 모달입니다. 현재 게시물에선 해시태그를 어떻게 구현했는지에 대해서 설명할것이기 때문에 해시태그 관련된 코드만 어떻게 구현했는지에 대해 설명하겠습니다. const [tag, onChangeTag, reset] = useInput(''); const [tagList, setTagList] = useState([]); 해시태그를 관리하는 컴포넌트입니다. tag : 현재 input의 입력된 value onChangeTag : value 변환시 계속 업데이트해주는 함수 reset : value 초기화 함수 tagList : 태그 리스트를 관리하는 string 배열의 상태 setTagList: 태그 리스트 상태변경해주는 상태변경함수. input의 value값은 커스텀훅인 useInput을 사용하여..
DatePicker 디자인 위 사진은 현재 진행중인 사이드 프로젝트의 디자인시스템 입니다. 위 사진은 디자인 시스템에 있는 datepicker 가 사용되고있는 디자인 시안입니다. 해당 디자인은 기존에 나와있는 캘린더 라이브로리로 구현하기에 어려움이 있었습니다. 따라서 직접 Datepicer 캘린더를 구현하기로 했습니다. Datepicker 날짜 구하기 먼저 각 날짜와 요일 계산등을 쉽게하도록 도와주는 라이브러리인 date-fns 를 설치해야합니다. yarn add date-fns 1. 캘린더에 그려줄 날짜 계산 커스텀훅 작성하기 커스텀훅으로 작성하는 이유는 첫번째로 해당 데이터의 재사용성 증가,두번째로는 화면을그리는 UI와 데이터를 분리하여 유지보수를 쉽게 할 수 있습니다. import { addDays..
useMemo useMemo 란 값을 캐싱(메모이제이션)하는 리액트의 훅입니다. useCallback 과 다른점은 useCallback 은 함수를 캐싱하고 useMemo 는 값 자체를 캐싱합니다. 첫번째 인자로 함수를 받고 두번째 인자로 의존성 배열을 받습니다. useMemo 사용 예시 import React from 'react'; import { useState } from 'react'; export default function App() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(0); const countValue = count1*count1 return ( setCount((prev) => p..
