이번 스프린트 미션은 본격적으로 react로 프로젝트를 구현하게 되었다.
강의 내용도 어려웠지만 실제로 프로젝트로 구현하려니... 막막하다
어려웠거나, 이번에 알게 된 기능
1. 반응형 웹사이트 만들기
- 미디어 쿼리를 활용해서 반응형 웹사이트를 만들어야 했는데, 스타일의 변화 뿐 아니라 쿼리 스트링또한 가변적으로 api에 요청을 해야 했다.
방법을 모색하던중에, 나는 최상위 컴포넌트에서 화면사이즈를 감지하는 window.matchMedia를 사용해 device 스테이트에 값을 지정하고, 그걸 자식 컴포넌트에 prop으로 내려주는 방법을 선택했다.
이방법을 선택한 이유
-
디바이스 타입 감지 로직을 최상위 컴포넌트에 두면, 앱 전체에서 공통된 기준을 사용해 디바이스를 구분할 수 있을것 같았다.
-
deviceType 값을 자식 컴포넌트에 내려주면, 각 컴포넌트는 추가적인 디바이스 감지 로직 없이 그 값만을 가지고 사용할수 있을것 같았다.
-
그러나 이값을 아주 깊숙히 내려줘야 하는 prop drilling이 일어난다면, context로 바꾸어서 사용할 용의가 있다. 아직까지 프로젝트 구현상 깊숙하게 prop을 전달할일은 없을것 같아서 위의 방식대로 구현했다.
아래 링크는 방법을 모색하다가 발견한 react-responsive의 존재, 나중에는 이러한 라이브러리도 적극 사용해 보고 싶다.
여기까지 반응형 웹 api
받아온 prop에 따른 스타일드 컴포넌트 변화
삼항연산자의 중첩
font-size: ${({ deviceType }) =>
deviceType === "mobile"
? "14px"
: deviceType === "tablet"
? "16px"
: "18px"}; // 디바이스 타입에 따라 글자 크기 변경
그러나 이미지 태그의 경우 표준 속성이 아닌 내가 지정한 prop을 전달하려 하니 에러가 발생했다.
그러나 item prop으로 어떤 값을 받았냐에 따라서 스타일이 달라져야 하기때문에
2. 반응형으로 flex의 순서 바꾸기
order는 CSS의 Flexbox에서 사용되는 속성으로, 요소의 표시 순서를 제어합니다. 기본적으로 Flexbox 컨테이너 안의 요소들은 작성된 HTML 순서대로 표시되지만, order를 사용하면 이 순서를 자유롭게 변경할 수 있다.
사용법
order의 기본값은 0입니다.
숫자가 작을수록 먼저 표시되고, 숫자가 클수록 뒤에 표시됩니다.
.item1 {
order: 2; /* 두 번째로 표시 */
}
.item2 {
order: 1; /* 첫 번째로 표시 */
}
.item3 {
order: 3; /* 세 번째로 표시 */
}
그러나 homepage 컴포넌트에서는 list처럼 잘안됨.
리액트 데브툴, 콘솔 디버깅 모두 해봤지만 잘 전달됨. 아무래도
homepage컴포넌트에서는 device값에 따라 useEffect가 작동하고, 그 useEffect에서는 page, order등이 바뀌어 또 다른 useEffect를 작동하므로 너무 많은 재렌더링이 일어나기 때문인것 같았다.
결국 device를 useHook으로 바꾸고 device를 사용해야 하는 곳에서는 훅을 불러와서 화면의 사이즈가 바뀔때마다 정해진 문자열을 리턴받아오게끔 했다.
뭔가 문제를 닥칠때마다, 다 통째로 바꿔야하는 오래걸리는 작업이더라도, 방법을 몰라서 막막한것 보다는 나은것 같다. 방법을 모르면 뭘 해야할지도 모르는 상황보다는
시간이 오래걸리더라도 차분히 코드를 작성하는 것이 더 좋은것 같다 아마 다들 그렇겠지?
위의 코드를 보면 device가 바뀔때마다 pagesize와 bestPageSize가 바뀌고, 그로인해 또다른 useEffect가 일어났다. 콘솔에 device값을 확인해보니 사이즈가 바뀔때마다 device가 3,4번씩 출력되었다.
그래서 위와같이 useWindowSize라는 훅으로 사이즈에 따라 mobile, desktop, tablet이라는 값을 할당하고, 리턴해주었다. 그리고 그걸 해당 컴포넌트에서 device라는 값으로 담아주었다.
그결과, 지저분했던 Homepage 화면이 좀더 직관적이고, 렌더링도 2번으로 줄어든걸 확인했다!
따라서 사이드 이펙트가 일어나지 않아 스타일드 컴포넌트 또한 잘 적용되는것을 확인했다
끝마치며
미션을 제출한 결과 주강사님께서 디바운싱/ 쓰로틀링이 있다는 것을 얘기해주셨다.
리사이징이 될때마다 많은 호출이 일어나고 있을것이고 디바운싱과 쓰로틀링을 사용하면 성능면에서 정말 좋을 것이라고 얘기하셨다. 다음 미션 때는 디바운싱과 쓰로틀링을 공부한뒤에 한번 적용해 볼 예정이다!
