TIL, 06.26

리액트 공부

스타일링에 대해 리마인드 했다 그중 스타일 컴포넌트를 중점으로 공부했다

리액트 훅 useState의 주의해야할 점에 대해 알게 되었다. 일반적인 업데이트와 함수형 업데이트의 차이가 있고 일반적인 업데이트는 리액트에서 최적화를 위해 배치 처리하지만 함수형 업데이트는 순차적으로 그냥 실행된다

또한 useEffect에서  중요한 의존성 배열과 cleanup 그리고 useRef에 대해 공부했다

 

만든 페이지네이션 코드리뷰

리액트 스터디에서 만든 페이지네이션에 대한 자체 그리고 매니저님과 코드리뷰를 했다

페이지네이션은 백이랑 같이 한다. 전체 데이터를 가져오는 것이 아닌 유저가 선택한 페이지를 백에서 가져와서 프런트가 보여주는 방식이다. 즉 버튼을 눌렀을때 해당 페이지 정보를 가져오는 식이다

나는 백이랑 연결된다는 생각을 못했기 때문에 다른 페이지에 갔다가 다시 돌아와도 같은 내용을 보여주어야 한다고 생각해 api의 내용을 한 번에 많이 가져와 slice으로 나눠서 보여줬는데 이럴 경우 렌더링에 시간이 오래 걸려 매우 좋지 않은 방식이었다. 매니저님께서 백이랑 연결했을 때를 생각해 버튼을 눌렀을 경우 데이터를 받아오는 것이 맞다고 하셨다(다만 이렇게 하면 백이랑 연결되어있지 않은 나의 경우 매번 사진이 바뀌긴 한다)
또한 limit(데이터 개수 제한)를 유저에게 받아오고 그 페이지에 그만큼에 정보를 가져와 유저에게 보여주면 되는데 개발자는 항상 데이터가 엄청 많아졌을 경우를 생각해야 하기 때문에 최적화를 위해 드롭다운으로 유저의 선택을 받는 것이 좋다(입력값으로 받게되면 너무 큰 수를 받는 경우가 있기 때문에) 또한 많은 양의 데이터를 한 번에 받아오는 것보다 작은 데이터를 여러 번 받는 것이 좋다

 

후기

없음