리액트 공통 컴포넌트 렌더링 확인 방법이 궁금합니다

Question

안녕하세요, 현재 퍼블리셔로 근무하며 Django와 Next.js를 활용해 개인 포트폴리오를 제작 중입니다.설계한 디자인 시스템을 기반으로 공통 컴포넌트들을 먼저 코드화하고 있는데, 렌더링을 확인하는 과정에서 실무자분들의 조언을 얻고 싶습니다.스토리북을 활용해본 경험은 있으나, 개인 프로젝트에서 활용하기에 초기 설정 및 유지 비용이 크다고 느껴져 지양하려고 합니다.우선 단순히 /test/{컴포넌트명}/page.tsx 로 테스트 페이지를 만들어 확인하고 있습니다. 더 좋은 방법이 있을까요?

baeharam · Accepted Answer

안녕하세요, 현재 프론트엔드 개발자로 일하고 있습니다.Django 기반의 프로젝트를 해보진 않아서 그 부분에 대해선 잘 모르겠지만 컴포넌트를 테스트 할 때는개발 서버 기준으로 일일히 확인하는 비용이 훨씬 높습니다.초기에 설정해 놓는다면 추후에 관련 비용을 줄일 수 있습니다.따라서 스토리북을 강력히 추천합니다. 초기 설정 및 유지 비용은 AI 로 줄이심이 좋을듯 합니다.

BlueFestival · Answer

크롬에서 React Dev Tools를 활용하시면 개발자 도구에서 컴포넌트 별로 렌더링 상황을 확인하실 수 있습니다.

리액트 공통 컴포넌트 렌더링 확인 방법이 궁금합니다

2개의 답변

Q&A 목록