1. 동기 + 사전지식 useCallback은 useMemo의 함수 버전으로 알고 있다. 두 Hooks는 함수, 변수를 Memoization해서 재사용성을 높이고, 성능을 향상시킨다고 하는데, 실제 개발에서는 DOM 트리의 복잡도와 설계 복잡도가 높아짐에 따라 원하는 대로 작동하지 않았다. 예상 시나리오와 실제 결과를 테스트 하면서 몸소 익히고, 관련 개발문서 및 레퍼런스로 참고한 자료들을 적어둘까 한다. 2. 초기 코드 useCallback 테스트를 위해 예제 코드를 만들어보자. import { useState } from "react"; export const UseCallbackExample: React.FC = () => { const [todos, setTodos] = useState([]); ..
이전 포스팅에서 Jest를 사용하여 Typescript로 구현한 로직을 테스트하는 방법 공부했다. 그러던 도중, React라는 Frontend 개발환경에서 컴포넌트가 정상적으로 동작하는지 테스트하는 것이 더욱 필요하지 않을까? 하는 생각에 찾아본 결과, React Testing Library를 알게 되었다. 프로젝트 셋업을 하면서 Redux, Route를 적용할 때마다 문제가 발생했다. 결국, 테스트 구조에 대한 이해가 부족했기 때문에 에러가 떴다. (다음에는 인지하고 개발하자!) 1. React Testing Library(RTL) 리액트 테스팅 라이브러리는 리액트 컴포넌트를 테스트하기 위한 툴이다. Jest를 기반으로 동작하기 때문에, Jest로 테스트 코드를 작성해 본 경험이 있다면 접근이 쉬울 것..
문제 서울시에서 제공하는 OpenAPI로 지하철 정보를 보여주는 프로젝트를 진행하다 난관에 부딪혔다. 메뉴를 Input 태그의 button으로 구성하고, onClick 시에 Input의 name에 따라 해당하는 메뉴로 넘어가는 Header Component를 구현하고 있었는데 name 태그를 찾을 수 없다는 오류가 떴다. Javascript에서는 Type 선언이 없기 때문에 Tag의 Attribute를 쉽게 불러올 수 있지만, TypeScript를 사용하다보니 Input에서 name attribute를 불러오는데 애를 먹었다. 과정 시작 코드는 다음과 같았다. const HandleClick = (event:React.MouseEvent) => { const e = event.target; console..
MVC, MVVM 등의 유명한 디자인 패턴을 비롯하여 Presentational-Component, Flux 패턴 등까지 각 상황, 요구사항에 맞는 다양한 디자인 패턴이 있다. 각각의 디자인 패턴은 개발의 관심사에 따라 고안되었다.(기존 패턴들의 단점을 보완하여 나온 패턴들도 있겠지만, 그것도 관심사가 개발 환경에 따라 관심사가 달라진 탓이라고 생각한다..!) 그 중 React Component 개발에 관련있는 VAC 디자인 패턴을 공부하여 소개한다. VAC의 관심사는 ? React는 Frontend Framework로써, 크게 세가지 일을 한다고 생각한다. 1. UI View - 사용자에게 보여지기 위한 컴포넌트 및 배치를 구성한다. 2. Data Binding - 서버 혹은 내부에서 받거나 처리한 ..