Draggable Tab 크롬의 탭을 드래그해서 이동 시켜 보면 header의 위치가 자유롭게 이동되는 것을 확인할 수 있습니다. 이러한 Drag 기능을 Tab에 넣으려고 합니다. 쉽지는 않아 보입니다. 단계별로 차근차근 개발 해보겠습니다. Tab Elements의 Ref값을 저장하자 Tab을 이동 시키는 것은 런타임에 사용자가 동작 시키는 것이기 때문에 DOM에 직접 접근해서 위치를 파악하고 이동시켜야 하는 위치라면 이동시키는 방식으로 접근해야 합니다. 접근해야 할 DOM은 tab header element'들' 입니다. 여러 개의 tab header에 대한 ref 값을 저장할 것이기 때문에 배열 형태가 되어야 겠습니다. 다음과 같이 설정하면 refs.current 배열에는 header e

Tab Element의 출력 현재 선택된 Tab에 대한 Tab Element를 출력하는 방식에 대해서도 Tab은 많이 달라질 수 있습니다. 현재 구현 해놓은 방식은 다음과 같습니다. Tab의 하위 컴포넌트로 주어진 TabElements 배열에서 선택된 탭의 index 컴포넌트'만' DOM에 렌더링 됩니다. 선택되지 않은 탭의 컴포넌트들은 DOM에 렌더링 되지 않습니다. 해당 방식에는 문제점이 존재합니다. SQL1 탭에서 작업을 한 후 SQL2 탭으로 넘어가면 SQL1 탭에서 작업한 내용은 사라지게 됩니다. DOM Tree에 새로 렌더링 되기 때문입니다. 하지만 일반적으로 에디터 프로그램을 사용할 때 탭을 한번 이동했다고 작업 내용이 모두 사라지는 것은 사용자 입장에서 억울합니다. 이럴

untitled-n tab tab을 생성할 때 아직 title이 정해지지 않았다고 해서 untitled-{인덱스 number} 형태로 title을 정해주고 싶습니다. 생성만 한다면 걱정할 것 없지만 삭제와 생성이 번갈아 발생할 수 있기 때문에 해당 index를 구하는 것이 조금 까다롭습니다. 해당 부분을 해결하기 위해 고민한 이야기를 하려고 합니다. 개발 tab을 추가할 때 우리는 onAdd 메소드를 props로 넘겨주기로 했으므로 onAdd props를 중점적으로 보시면 되겠습니다. Untitled의 index를 다음과 같이 구하고 있습니다. 현재 남아 있는 탭의 index 중 가장 큰 index 다음 값으로 세팅 합니다. 단계별로 다시 말씀드리면 > 1. title이 Untitled-{숫자} 형식의 정규식과 일치하는 tab들만 filtering 합니다. > 2. -을 delimiter로 하여 두 번째 원소 즉, index만 뽑아냅니다. > 3.

Tab Tab은 정말 많이 사용되는 컴포넌트입니다. 처음에는 Mui와 같은 라이브러리를 사용했지만 여러가지 제약사항들이 존재했습니다. > * Tab 삭제 기능 X > * Tab Title 수정 기능 X > * Default Tab 생성 기능 X 분명 기본적으로 있어야할 것 같은 기능인데 존재하지 않습니다. 왜 없을까 고민해보면 tab elements 즉, tab 아래에 표시될 contents들을 관리하는 로직을 tab 컴포넌트 안에서 하기가 애매하다는 점 때문입니다. tab을 개발할 때 가장 중요한 점도 이 tab elements들을 어디서 어떻게 관리하냐 입니다. tab에 들어갈 tab elements들은 분명 부모 컴포넌트에서 attribute 형태로 제공해줄 것인데 tab 컴포넌트 내부에서