본문 바로가기

타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js)67

멘토링 - 리액트 코드 클린하게 작성하기 / pure redux 1. constant 객체는 빼는 것이 좋다. 데이터가 업데이트가 되지 않는다면 이처럼 바깥으로 빼주는 것이 좋다. 2. state를 불필요하게 너무 많이 사용하지 말 것 3. useState에 함수를 넘길 때 => useState가 익명함수로 쓴다면 비동기적으로 작동할 수 있다. => 함수를 한 번 감싸준다면 리렌더링될 때마다 실행되지 않는다. 4. 상태변경시에도 리렌더링을 방지하기 => useRef 사용하기 상태가 변경되었어도 리렌더링 방지를 한다. 마운트 되었을때만 5. 꼭 해줘야하는 처리 로딩 에러 빈페이지 새롭게 시작하는 곳이면 redux를 사용하지는 않지만, 새롭게 나오는 것들도 redux에서 파생된 것이 많으므로 공부하는 것을 .. 2024. 3. 8.
useSearchParams, URLSearchParams, locaton (with 카테고리 동기화) 수정할 부분: 사진 업로드하기 (필요한 이유에) 필요한 이유 맨 위 카테고리와 중간의 컨텐츠 부분 두 군데서 카테고리를 설정할 수 있다. 이럴 때, 두 카테고리를 동기화하고, 활성화된 카테고리를 관리하여 활성화된 색을 보여주도록 할 것이다. react-router-dom에서 제공하는 location과 useSearchParams를 사용할 것이다. 1. useSearchParams react-router-dom 패키지에서 제공되는 훅으로, 현재 URL의 쿼리 문자열을 읽고 쓰기 위해 사용 const [searchParams, setSearchParams] = useSearchParams(); 참고로 url 쿼리 문자열을 읽기만 할 때는 다음도 가능하다. const params = new URLSearchP.. 2024. 3. 3.
api 요청 플로우 , params 처리 View => 화면에 데이터 사용 Hooks => api마다 가공 및 useEffect등 설정 Fecher => api 통신 요약해보면 위와 같다. 다음으로 api 로직 예시와 여러가지 params를 붙여 api 통신을 하는 경우를 살펴보겠다. api 로직 예시 axios를 이용해서 api를 요청해보겠다. npm i axios --save component/ common/ header.tsx const { category } = useCategory();​ => hook과 연결하는 부분 , category 받아와서 화면에 사용 hooks/ useCategory.ts import { useEffect, useState } from "react"; import { fetchCategory } from ".... 2024. 3. 1.
화면 테스트하기 @testing-library/react를 통해 테스트를 할 수 있다. render와 expect를 이용한다. npm test 명령어를 통해 만들어둔 "컴포넌트".spec.tsc를 검사할 수 있다. 예시 Button.spec.tsx import { render, screen } from "@testing-library/react"; import Button from "./Button"; import { BookStoreProvider } from "../../context/themeContext"; describe("button 컴포넌트 테스트", () => { it("렌더 확인", () => { // 1. 렌더하기 render( 버튼 ); // 2. 확인 expect(screen.getByText("버.. 2024. 3. 1.

티스토리툴바