반응형 에러 처리2 카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 13일차(24-07-10) 회고📝 함수 추상화 API 호출 로직이 컴포넌트에 결합되어 재사용성이 떨어졌다.const { data, isLoading, error } = useQuery( ['rankingProducts', filterOption], () => fetchRankingProducts(filterOption), { keepPreviousData: true },);개선 코드: useFetchRankingProducts라는 커스텀 훅을 API 파일에 정의하여 useQuery 로직을 캡슐화하였다. // api.jsexport const useFetchRankingProducts = (filterOption) => { return useQuery( .. 2024. 7. 17. 리액트 React | 노마스 코더 영화 평점 웹서비스 | 컴포넌트 생명주기 함수: 마운트, 업데이트, 언마운트, 에러 처리 ✅ 생명주기 함수 컴포넌트가 생성, 업데이트, 소멸될 때 호출되는 일련의 메서드이다. 생명 주기 함수를 통해 컴포넌트의 동작을 제어하고, 상태를 갱신하거나 데이터를 가져온다. 함수 실행 순서 constructor() 함수: 컴포넌트가 생성될 때 호출되며, 초기화 작업을 수행한다. static getDerivedStateFromProps() 함수: 컴포넌트가 생성될 때와 업데이트될 때 호출되며, 프로퍼티 값을 상태 값으로 변환을 수행한다. render() 함수: 컴포넌트의 UI를 생성하고 반환을 수행한다. componentDidMount() 함수: 컴포넌트가 마운트 된 후에 호출되며, 초기화 및 네트워크 요청 등의 작업을 수행한다. shouldComponentUpdate() 함수: 컴포넌트가 업데이트될 때.. 2023. 4. 3. 이전 1 다음 반응형
