React
-
React 에서 비즈니스 로직 분리하기 (Custom Hooks Pattern)Web/React 2022. 4. 25. 20:56
관심사의 분리 여러분은 내일 A 과목을 시험 칩니다. 벼락치기의 민족답게 우리는 수업 중에 필기했던 내용들을 시험 전 날이 되어서야 한 번 살펴보려고 합니다. 그런데, 여러분의 노트에는 여태 들었던 모든 과목의 강의에 대한 내용이 필기되어 있습니다(꽤 성실하네요). 당장 내일 시험인데, 이렇게 갖가지 과목이 섞여있는 노트에서 A과목에 대한 내용만 뽑아 살펴보자니 눈앞이 깜깜합니다. 몇몇 내용은 A과목에 대한 내용인지 아니면 다른 과목의 설명인지 혼란스럽기까지 합니다. "누가 저런 바보짓을 해?"라고 생각하실 수 있는데 실제로 개발을 할 때 종종 일어나는 일입니다. 하나의 메서드, 혹은 컴포넌트가 굉장히 많은 일을 담당하고 있을 때 우리는 위와 비슷한 상황을 경험합니다. 새로운 기능을 추가해야 하거나 오류..
-
03. 렌더링 최적화(1) Memoization을 통한 리렌더링 최소화Projects/세계 여행 지도 2021. 6. 3. 23:52
0. Performace / React-Profiler를 통한 퍼포먼스 확인 열심히 기능을 구현했지만 뭔가 반응이 살짝 느려서 리액트 개발자 툴인 profiler로 확인을 해보았다. 마우스를 옮길 때 마다 자그마치 400ms가 넘는 미친 반응속도가 나오고 있었다. 물론 npm run start로 실행하고 있다고는 하지만 너무나도 심각한 수준이었다. 조금 더 자세히 살펴보자, 그 이유를 알 것도 같았다. (사실 예상은 했었지만 이정도일줄은 몰랐다.) 180 x 90. 그러니까 만 육천개가 넘는 component들이 마우스가 이동 할 때 마다, 조금 더 정확하게는 마우스가 가리키는 나라가 변할 때 마다 모두다 새로 렌더링 되고 있었다...! 마우스 호버링 이벤트가 일어나면 상위 컴포넌트인 WorldMap의 ..
-
02. 컴포넌트화를 통한 호버링 하이라이트 (feat. Styled Component)Projects/세계 여행 지도 2021. 6. 3. 21:33
함수형 컴포넌트 vs 클래스형 컴포넌트 이 전에는 함수형과 클래스형 컴포넌트의 차이를 몰랐다. (그냥 같은 것을 다르게 표현 한 건 줄만...) 현재 리액트 공식 문서에서는 두가지의 이유로 클래스형 컴포넌트보다 함수형 컴포넌트와 훅을 함께 사용하는 것을 권장한다. 1. 편리한 선언 2. 메모리 자원을 덜 사용함 - 함수형은 상태를 저장할 수 없어서 한번 실행되고 나면 가비지 컬렉터에 의해 메모리 상에서 사라진다. - 상태를 저장할 수 없기 때문에 클로저 원리를 이용한 useState 훅을 이용해서 state를 저장한다고 한다. 이러한 점들을 알게 되어서 이번에는 함수형 컴포넌트로 앱을 구성했다. 그리고 나중에 React와 Hook의 동작원리에 대해 한번 공부해보고싶다는 생각이 들었다..! 지난 포스팅의 ..
-
01. Grid로 세계 지도 나타내기Projects/세계 여행 지도 2021. 6. 3. 17:37
팀 해체 후 첫 번째 토이 프로젝트 지우님과 팀 해체를 하고 다시 만났다. 단순히 구현하는 것이 목적이 아닌 공부를 목적으로 하는 첫 번째 토이 프로젝트를 진행하기로 했다. 내가 예전 부터 만들어보고 싶었던 앱을 하나 제안했는데, 바로 내가 방문해 본 국가들을 세계 지도에 색칠을 해 나갈 수 있는 간단한 웹 어플리케이션이었다. 지우님은 나라를 검색하고 방문 여부에 관한 데이터를 관리하는 역할을 맡았고 나는 세계 지도를 렌더링하고 컨트롤하는 역할을 맡았다. 우선, 세계 지도를 이미지로 나타내고 싶었지만 일러스트 파일을 찾기가 쉽지 않아서 고민끝에 grid로 한번 나타 내보기로 했다..! node로 매크로 앱 만들기 세계 지도를 픽셀로 나타내기 위해 특정 픽셀 별 위치가 담긴 json 파일이 필요했는데, 이..