2월 21일 WID : TabPanel 내용 보강, 업무적/개인적 todo list 작성

TabPanel의 itemRender와 itemComponent

오늘은 데브익스트림의 TabPanel에서 사용할 수 있는 prop중 itemRender와 itemComponent의 작동방법을 비교했다.

itemRender

• 탭이 바뀔때마다 하나의 패널에 내용을 바꾸어 렌더링한다. 탭이 여러개여도 렌더링된 패널은 한개 뿐이다.

• tabPanel에 주입된 dataSource를 곧바로 받아오지 못한다. 메소드의 params로 넘겨준 값이나 렌더링할 컴포넌트에 주입한 props만 받아서 사용할 수 있다.

itemComponent

• 탭마다 패널을 렌더링해두고 탭을 선택할 때마다 디스플레이 속성을 통해 탭에 해당하는 패널을 노출해준다. 개발자도구에서 엘리먼트를 추적해보면 탭 개수대로 html요소가 준비되어있음을 알 수 있다.
• tabPanel에 주입한 dataSource를 렌더링하려는 컴포넌트에 별도로 주입해주지 않아도 data로 가져다 사용할 수 있다. 그래서 처음에 데이터소스를 필요한대로 구성하는 것도 중요하다.

더 생각해볼 점

• 오늘 보니까 다른 화면에서는 itemRender를 사용하면서도 useState의 값과 함수를 모두 내려주지 않아서인지 리렌더링 때문에 스크롤 포커스가 리셋되는 현상이 발생하지 않고 있었다. 오늘 주어진 업무를 진행하느라 유심히 뜯어보지는 못했으나 itemRender와 itemComponent의 차이를 파악해서 코드를 수정해보고 싶다고 생각했다. 개인적으로는 itemComponent를 쓰는 것이 더 안전하다고 느꼈다. setState함수를 내려주지 않아도 되기 때문이다.

---

Todo List 작성

• 나는 업노트를 사용하는데, 개발노트에다가 업무와 관련된 리스트와 개인적인 학습을 위한 todolist 를 각각 작성하였다. 조언을 들은 것과 내가 느낀 점을 그냥 적어놓고 지나가면 잊어버릴 것 같아서 따로 정리했다. 업무 관련 리스트는 시간 날때마다 진행해볼 생각이다. 개인적인 학습을 위한 리스트는 하나씩 포스팅으로 정리해보면 좋을 것 같다.

---

오늘의 생각

문서작업은 너무너무 하기 싫지만 미룬다고 될것도 아니니까 빨리 끝내고 코딩하러 가자!