API 함수를 선언적으로 작성하기 사용자의 action에 의존하는 API는 그 action 함수 내부에서 fetch 되도록 리팩토링하였다. 왜 API fetch 함수의 위치를 변경했는가? 내가 담당한 목적지 리스트 페이지는 클릭과 같은 사용자의 행위(action)에 의존하여 업데이트되는 데이터가 많다. 실제로 내가 사용한 API 11개...

지식 습득하기 어제에 이어 공식문서에서 useRef 부분을 정독했다. useRef useRef은 화면에 직접적으로 렌더링되지 않는 정보를 저장하는 hook이다. 이에 따라 useRef가 참조하는 정보가 변경되어도 리렌더링 되지 않는다. 이번에도 내 코드에서 useRef를 사용할 수 있는 부분을 추려보았다. DOM 요소에 접근하는...

리팩토링 들어가기 기존의 내 코드를 개선하려면, 보다 향상된 지식이 필요하다. 내가 프로젝트를 하며 느꼈던 가장 아쉬웠던 점은 useMemo, useCallback과 같이 성능 향상에 도움을 줄 수 있는 hook을 적극적으로 활용하지 못한 점이다. 참조값을 저장할 수 있는 useRef도 잘 사용하지 못하였다. React hook에 대한 이해도가 낮...

톺아보기 컴포넌트의 조건부 렌더링 조건부 렌더링에서 컴포넌트가 null을 return하는 것은 일반적인 경우가 아니다. * 부모 컴포넌트의 JSX에서 컴포넌트를 포함하거나 제외하도록 하자. 직접 JSX를 분기처리하여 유사한 output을 중복 작성하는 방법은 코드 유지보수에 어려울 수 있다. * 코드를 작성할 때 D...

톺아보기 컴포넌트 props 컴포넌트는 props 객체 하나만을 인자로 받을 수 있다. * 필요한 props attribute만 선별해서 가져오고 싶을 땐, 구조분해할당을 이용하자. props도 default value를 지정할 수 있다. 단, null, 0은 개발자가 직접 지정한 값이므로, default v...

톺아보기 리액트에서의 JSX 문법 리액트에서는 다른 방식으로도 컴포넌트를 작성할 수 있지만, 많은 개발자가 주로 JSX 문법으로 컴포넌트를 작성한다. * 반드시 JSX로 컴포넌트를 작성해야 하는 것은 아님. 웹이 사용자와의 상호작용이 강화되는 방향으로 발전하면서 logic이 컨텐츠를 결정하는 비중이 증가했다....

톺아보기 리액트의 의의 리액트는 컨텐츠를 마크업(mark up)하고 이에 JS를 곁들여서 상호작용이 가능하게 만드는 전통적인 웹 페이지 기술을 동일하게 사용한다. * 리액트 컴포넌트는 이 기술에서 JS 함수에 해당한다. * 컴포넌트가 return하는 것은 HTML로 마크업된 tag들이지만, 내부적으로는 JS로서 동작하고 있으며 이를 J...

톺아보기 리액트의 state state를 구조화할 때 DRY(Don’t Repeat Yourself) 원칙을 지키자. * state는 컴포넌트의 메모리와 같으며, 컴포넌트가 지속 추적하고 변화시킬 수 있다. * 최소한의 state만 상태관리하고 필요한 것은 직접 계산하여 무분별한 state 선언을 피한다. ...

톺아보기 컴포넌트 각 컴포넌트에 저장된 state는 독립적이다. * 동일한 컴포넌트를 재사용하면 state가 공유될 것이라는 내 생각과 달리, 컴포넌트별로 독립적인 state를 가진다는 점을 알게 됨. 다수의 자식 컴포넌트에서 데이터를 수집하거나, 두 개의 자식 컴포넌트가 서로의 state를 공유하도록 하려면...

React와 TypeScript를 활용한 [혼자옵서예: 1인 제주도 여행 일정공유 플랫폼 프로젝트]가 마무리 되었다. 생각보다 구현해야 할 기능이 많아, 에러와 버그를 파악하고 잘 작동하게 만드는 것만으로 시간이 훌쩍 가버렸다. 이에 따라 임기응변으로 수정하거나 방치한 코드가 정말 많다. 따라서 프로젝트를 복기하며 정리하는 시간을 갖기 전에 반드시 리...