[React/Typescript] 트리구조 UI 구현하기 3. - 재귀함수 돌리기
·
FE
지금까지는 기본적인 구조를 잡았으며, 토글 버튼 구현하는 것에 대해 다루어보았다.  ⭐️ data 적용하여 재귀함수 돌려보기이제는 위의 이미지에서 dummy data를 적용해 보겠다. (dummy data는 포스팅 1번에서 참고)앞서 설명하였던 것처럼 현재 children 이 있음에 따라 구조는 아래와 같이 만들어진다.  위 UI와 관련하여 dummy data의 형태는 다음 단계를 밟아 그려갈 수 있다. ⭐️ 가장 상위 뎁스의 id/name을 EntryContainer 컴포넌트 안에 담아주고, children 은 EntryContainer 안에 새로운 EntryContainer로 넣어준다. ⭐️ children 안에 만약 children 이 있다면, EntryContainer 를 넣어주고, childre..
[React/Typescript] 트리구조 UI 구현하기 1. - 기본 구조 잡기
·
FE
👉🏻 들어가면서의외로 개발을 하다보면 자주인듯 자주 아니게 트리구조 UI 들을 만나게 된다. 오늘 설명할 UI는 아래와 같이 토글 형태로 열리는 구조로 내가 자주 쓰는 방식에 대해 작성해보겠다. 👉🏻 누가 읽으면 되는지?위와 같은 형태의 UI를 구현해야하는 경우depth의 깊이가 정해져 있지 않아 재귀방식을 통하여 UI 를 구현해야 하는 경우트리구조에 토글기능도 포함해야 하는 경우위 상황에 해당된다면, 해당 포스팅이 꽤나 유용하게 활용될 수 있을 것이다. 👉🏻  데이터 구조만약, Backend 에서 어떤 형태로 데이터를 줄지 물어본다면 아래와 같은 데이터 구조로 요청드리는 것이 가장 좋은 방법이다.{ id:0, name:전체, children:[ { ..