React.js2 Suspense란 무엇인가 React Spense란 무엇인가? 를 사용하면 자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다. 기본 사용법 여기서 fallback은 로딩이 완료되지 않은 경우 실제 UI 대신 렌더링 할 대체 UI라는 뜻이다. 유효한 어떤 React 노드든 사용가능하며, 주로 로딩 스피너나 스켈레톤 같은 가벼운 플레이스홀더 뷰를 사용한다. Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 다시 children으로 전환된다. 렌더링 중 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화된다. 아래 예시에서 앨범 목록을 가져오는 동안 Albums 컴포넌트가 일시 중단된다. 렌더링할 준비가 될 때까지 React는 가장 가까운 상위 Su.. 2024. 3. 7. 가치있는 컴포넌트 만들기 잘 만들어진 공통 컴포넌트는 웹 프런트엔드 개발의 속도를 높여줄 뿐만 아니라 프로젝트의 더 높은 완성도를 만들어내는 데 큰 역할을 하는데 어떻게 하면 공통 컴포넌트를 더 가치 있게 만들 수 있을지 알아보자 확장 규칙 설계 명확한 컴포넌트 역할(만능 컴포넌트 지양하기) 공통 컴포넌트의 확장성을 확보하기 전에 가장 우선시되어야 할 것은 개발하고자 하는 공통 컴포넌트 역할의 경계를 명확하게 하는 것입니다. 일반적으로 공통 컴포넌트의 확장성을 고려할 때 공통이라는 명칭 때문에 수많은 케이스를 대응하기를 원하는 경우가 많습니다. 일명 만능 컴포넌트가 되기를 바라게 되는 것입니다. 그러면 어떤 일이 발생할까요? 처음에 만들었었던 공통 컴포넌트가 점점 단순화되고 어느 순간 그냥 텅 빈 DOMElement 그 자체가 .. 2024. 3. 6. 이전 1 다음
