React

[ React ] SelectBox 컴포넌트 키보드 이벤트 추가 | onKeyDown키보드 이벤트 타입은 총 3가지가 있다.  [ 모던 자바스크립트 ] 40. 이벤트1) 이벤트 드리븐 프로그래밍이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라zodev.tistory.com 해당 컴포넌트에 이어서 작업한 내용(필요해서 찾고 있었는데 정리를 안 해놨더군요)   요구사항스크롤이 있는 옵션 리스트에서 키보드 이벤트를 통해 focus된 옵션을 이동 중일 때, 스크롤 아래쪽의 옵션이 focus되면 스크롤을 자동적으로 이동시키고 싶다.    구현1. OptionListBox에 ref를 걸어준다.  2. focusedIndex가 변화할 때 scrollIntoView를 통해 스크롤을 ..

Vue3에서는 v-slot을 통해 간편하게 slot을 사용할 수 있었다. 그렇다면 React에서는 어떻게 slot을 구현할까?  사용처(?)공통 컴포넌트 중 Modal을 만들다가, Head와 Footer는 공통적이면서도 Content 영역만 가변적으로 사용되게 하고 싶었다.  방법) – React" data-og-description="The library for web and native user interfaces" data-og-host="react-ko.dev" data-og-source-url="https://react-ko.dev/reference/react-dom/components/common" data-og-url="https://react-ko.dev/reference/react-dom..

7월에 개발한 내용 이제야 올리기....그동안 다른 일이 생겨서 공통 컴포넌트 개발은 딱 그리드 편집모드까지만 만들고 뒤로 미뤄뒀다.  요구사항편집 모드 분리셀 데이터 변경읽기 전용 셀 → input, selectbox, datepicker 등으로 변환체크박스 → 비활성화 또는 행 삭제 버튼으로 변경정렬 불가행 추가/삭제 구현   구현1. 편집모드editmode 변수 추가const [editmode, setEditmode] = useState(false); 그리드에 보여지는 viewData에 수정을 가할 예정이다. 그렇기 때문에 편집 모드로 변경 시에는 적용된 정렬을 전부 해제한다.useEffect(() => { setViewData( rowData.map((data, idx) => ({ ..

요구사항Only View정렬행 선택 (체크박스)셀 색상 (글자색, 배경색) → 메서드로 구현셀 더블클릭 이벤트마우스 hover 시 행 하이라이팅가로/세로 스크롤 구현1. 구조 ... ...    2. 데이터 매핑 와 사용즉 헤더의 id와 같은 headers 값을 가진 데이터를 매핑해준다.   3. 정렬컬럼 헤더 클릭 → 클릭한 컬럼 정보 props로 넘겨줌 → 조건 맞춰 rowData 정렬숫자는 크기 순으로문자는 ㄱㄴㄷ, abc 순으로클릭 시 동작 순서 : 오름차순 → 내림차순 → 원래대로 [ Javascript ] 정렬 함수 (sort, toSorted, localeCompare)sort Array.prototyp..

이유기존 DOM 구조 상에서는 DatePicker와 SelectBox 컴포넌트 최상위 div 하위에 팝업이 포함돼있었다.그러나  DatePicker와 SelectBox를 다른 요소의 하위로 넣는 경우, 팝업 또한 상위 요소 범위를 벗어나지 못한다는 단점이 존재했다.그렇기 때문에 DOM구조에서 독립적으로 분리해 팝업이 열렸을 때 최상위에서 잘림없이 보여지게 하기 위해 재구현했다. 이때 모달에 많이 사용하는 createPortal을 사용했다.  createPortal createPortal – ReactThe library for web and native user interfacesko.react.dev부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링할 수 있게 한다.  creat..

키보드 이벤트 타입은 총 3가지가 있다.  [ 모던 자바스크립트 ] 40. 이벤트1) 이벤트 드리븐 프로그래밍이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라zodev.tistory.com  그 중에서도 가장 keydown 이벤트를 활용하여 키보드 방향키 + Enter 키로 옵션을 선택하는 기능을 구현할 것이다.   1. tabIndex 속성 설정이벤트를 받으려는 HTML 요소에 tabIndex 속성을 설정하고, (그래야 div 요소가 포커스를 받을 수 있다.)SelectorBox 컴포넌트에 keydown 이벤트를 바인딩한다.tabIndex : 요소가 포커스 가능함을 의미SelectorBox는 div(..

검색 가능한 SelectBox를 구현하며 돋보기 아이콘을 placeholder로 적용해 기본 SelectBox와 차이를 두려고 했다. 다만 input 요소의 placeholder 속성에는 직접적으로 아이콘을 표시할 수는 없기 때문에 다른 방법을 사용해야 한다.   1. 아이콘 넣기input 태그와 동일한 상위 요소의 하위에 원하는 icon 태그를 넣고 absolute 속성을 활용해 자리를 적절히 배치해준다..search-icon { position: absolute; left: 1rem; pointer-events: none; font-size: 1.2rem;}   2. 아이콘 표시 상태 변수 추가display 속성을 활용해 아이콘을 표시하거나 숨겨준다.이때 addEventListener 대신 아..

[ React ] SelectBox 컴포넌트 구현단순한 SelectBox 만들기 ~  요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업zodev.tistory.com지난번 만든 SelectBox에서 더 나아가 검색을 통해 옵션 리스트를 불러오는 SelectBox를 만들어봤다. 기본 틀은 이전과 동일 !!  추가할 내용InputInput에 따라 달라지는 options  1. Input 입력된 값을 보여주기 위해 keyword 변수를 생성했다.// Input 컴포넌트에 바인딩하는 Keywordconst handleInput = (e: React...

단순한 SelectBox 만들기 ~  요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업의 열림/닫힘을 표시하는 아이콘 구현할 동작SelectorBox를 누르면 OptionListBox가 열린다.OptionListBox에서 특정 OptionItem을 선택하면 OptionListBox가 닫히면서 SelectorBox에 선택한 값을 표시한다. (상위 데이터 변경)OptionListBox의 상태에 따라 CaretIcon을 바꿔준다.외부 영역을 클릭했을 시에도 OptionListBox를 닫아준다.마우스 hover 상태의 OptionItem은 밝은 색상..

마땅한 라이브러리가 없어 직접 만들어봤다.  아이디어시간과 구분선은 같은 컴포넌트 내부에 작성하여 미리 시간표 레이아웃을 만들어 두고 그 외 예약 정보는 absolute로 적용한다.  시간표 레이아웃 {TIMELIST.map((time) => ( {time} ))}export const TimeList = styled.div` ${flexBox("column", "start", "start")}; color: ${({ theme }) => theme.colors.gray}; gap: 4rem; width: 100%; height: 100%; div { ${flexBox()}; width: 100%; height: 1rem; span {..