리액트 사이드바2 [React] Tree형 Sidebar 만들기 - 2 이전글 - [React] Tree형 Sidebar 만들기 - 1 (tistory.com) [React] Tree형 Sidebar 만들기 - 1 #1. Sidebar 제작 필요성 React로 웹사이트를 만들기로 마음먹고 많은 템플릿과 컴포넌트를 살펴보았지만 딱 이거다 하는게 없었다. 구글링을 해봐도 샘플은 강제로 컴포넌트를 병렬로 붙여 놓고 확 garve32.tistory.com #1. 최하위 노드(leaf)와 상위 노드(root) 분리 실제 화면 url을 가지고 있는 최하위 노드(leaf)와 상위 노드(root)를 분리해서 그려보자. 최하위 노드는 link를 연결해서 해당 메뉴로 이동할 수 있어야 하고, 상위 노드는 가지고 있는 하위 노드를 접었다 폈다 할 수 있어야 한다. 일단 메뉴를 열고 닫을 때 상.. 2022. 4. 9. [React] Tree형 Sidebar 만들기 - 1 #1. Sidebar 제작 필요성 React로 웹사이트를 만들기로 마음먹고 많은 템플릿과 컴포넌트를 살펴보았지만 딱 이거다 하는게 없었다. 구글링을 해봐도 샘플은 강제로 컴포넌트를 병렬로 붙여 놓고 확장하기가 힘들다던지 아니면 제한적인 props를 제공해서 커스터마이징 하기가 힘들다던지.. 아니면 그냥 ui가 맘에 안든다던지..(react-pro-sidebar가 제일 괜찮긴 하더라) 사실 그냥 남이 만들어 놓은것을 가져다 쓰는게 제일 편하긴 하다. 굳이 편한 방법이 있는데 새로 만드는 것 자체가 시간낭비와 노력낭비지만 만드는 과정속에 배우는게 있지 않을까? 하는 마음에 굳이굳이 직접 만들어보기로 한다. #2. 기본 골격 생성 Depth가 존재하는 Tree구조의 핵심은 재귀호출이다. 일단 자기 자신과 하위.. 2022. 4. 8. 이전 1 다음 반응형
