React6 [React] React Query의 후처리를 어디서 하는 게 나을까? 배경매치번호 유효성 검증 api 요청에 대한 성공,실패 후처리(매치 인증 플래그 변경 후처리 필요)를 개발하고 있었다.개발 도중 React Query 후처리를 어디서 하는 게 나을까?? 라는 고민이 생겼따. 고민1. Component에서 처리2. Custom Hook에서 처리 위 두 방안에 대해 예시와 장단점을 파악해보자1. Custom Hook 처리useFetchGetMatch.tsexport const useFetchGetMatch=(matchNo:number,setIsMatchNoAvailable:React.Dispatch>)=>{ return useQuery({ queryKey:["plabMatchNo",{matchNo:matchNo}], queryFn: ()=>f.. 2025. 4. 3. React.memo 활용 리액트는 먼저 컴포넌트를 랜더링한 뒤 이전 랜더된 결과와 비교하여 DOM 업데이트 여부를 결정한다.만약 랜더된 결과가 다르다면 React는 DOM을 업데이트한다. React.MemoReact는 해당 함수로 래팽된 컴포넌트를 랜더링 후 결과를 메모리제이션한다.그 후 다음 랜더링 진행 시 Props가 동일하다면 React는 메모리제이션한 컴포넌트를 재사용한다.이 때, Props 비교는 얕은 비교를 통하여 진행된다.더보기얕은 비교 - 숫자, 문자열 등 원시형 타입은 값을 비교 - 배열,객체 등 참조 자료형은 주소를비교 깊은 비교 - 값을 통해 비교 검색된 도서의 정렬 방식 변경 시 부모의 state 변경으로 인하여 아래와 같이 모든 하위 컴포넌트들이 재랜더링되게 된다.그러나 정렬 방식 변경 시 도서의 데.. 2024. 6. 12. 리액트) 타입스크립트에서 ...rest 사용 배경컴포넌트에서 받는 props의 양이 많았다. 그렇다고 아래처럼 각각 모드 적어주자니 너무 비효율적이다.interface IProps{ children:React.ReactNode, label:string, name: string, ....}const RadioGroup = ({label,children,name,.................}:IProps) => { .. return { blabla }} 해결Rest Paramters매개변수 수를 정해놓지 않고 사용자고 넣고 싶은 독립변수 수 만큼 도와주는 기능 위를 아래처럼 변경한다,interface IProps{ children:React.ReactNode, label:string, na.. 2024. 5. 28. React 리랜더링 조건 1. 자신의 state 변할 경우2. 부모 컴포넌트로부터 전달받은 props 변할 경우3. 부모 컴포넌트가 리랜더링 된 경우(2번 내용 여부 상관없이) 2024. 5. 16. 이전 1 2 다음
