react3 React에서 컴포넌트를 분리한다는 관점에 대해 다시 생각해보기 이 글의 시작은 지뢰 찾기 게임을 만들었는데, 그 코드 중 cells 데이터로 map을 돌리고, row로 다시 map을 돌려 버튼을 만드는 코드를 컴포넌트로 분리하면 성능이 향상된다는 말에 의문을 품은 게 시작이었습니다.{cells.map((row, rowIndex) => row.map((cell, colIndex) => ( )),)}컴포넌트 분리에 대한 대화를 나누면서도 확실하게 해소되지 않는 부분이 생겼기 때문입니다.컴포넌트 분리에 대해 다시금 이해하고, 저만의 원칙을 정한 뒤 작업이 필요할 것 같다는 판단이 들었습니다. React에서 컴포넌트를 분리하는 목적은 뭘까요? 왜 분리해야할까요? 잘 알고 있듯 코드의 재사용성, 가독성, 유지보수성을 높이고, UI 구조를 명확하게 하기 위함이라고.. 2024. 10. 21. Suspense 이해하기 react 공식문서를 보고 정리한 글입니다.Suspense란?자식 요소가 로드되기 전까지 화면에 대체 UI를 보여주는 것}> children: 궁극적으로 렌더링 하려는 실제 UI (위 코드에서는 SomeComponent)fallback: 실제 UI가 로드되기 전까지 대신 렌더링 되는 대체 UIReact node 형식은 무엇이든 대체 UI로 활용가능하나, 보통 로딩 스피너나 스켈레톤처럼 간단한 placeholder를 활용한다. Suspense는 children의 렌더링이 지연되면 자동으로 fallback으로 전환하고, 데이터가 준비되면 children으로 다시 전환한다.fallback의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화된다.React가 특정 컴포넌트를 마운트하기 전에, 비.. 2024. 10. 8. memo, useMemo 이해하기 리액트 공식문서를 보고 정리한 내용입니다.누군가 내게 memo, useMemo, useCallback 그거 왜 써? 라고 물어본다면 자신 있게 대답할 수 있을까?"성능 최적화를 위해 쓰지~""어떻게 최적화가 되는데?""음..."학습 전 누가 나에게 물어봤다면 이렇게 꿀 먹은 벙어리가 되어버렸을 것 같다...!하지만 이번에 나만의 React 만들기를 구현하며 memo, useMemo를 직접 구현해보려고 하니 다시 개념을 확실히 짚고 넘어가야 할 필요성을 강하게 느껴 학습해보았다.사실 당연한 거지 뭔지 알아야 만들 수 있으니까~!그래서 시작한 공식문서 정리! 이 정리를 바탕으로 정리가 되어 구현까지 진행할 수 있었다!시작해보자 😁 memo공식문서 : https://ko.react.dev/reference/.. 2024. 9. 11. 이전 1 다음
