728x90 리액트 API연동2 11.02.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-3 챕터리뷰 [ 새롭게 알게된 것 ] 1. Data를 요청할때마다 리듀서를 작성하는 것은 번거로운 일임을 알게됨 useReducer를 사용하면 무수한 setState 사용을 줄일 수 있고 확장성 높은 코드를 사용할 수 있는것 사실이지만 Data를 요청할때마다 useRedcuer를 작성해야하는 건 상당히 번거로움. 그래서 아예 따로 파일을 새로 하나 만들고 커스텀 Hook을 만들어 요청 상태 관리 로직을 쉽게 재사용하는 방법을 추천함 리턴값은 state와 fetchData를 반환해 나중에 데이터를 쉽게 리로딩 해줄 수 있는 장점이 있음. 이때 커스텀 Hook 첫번째 파라미터는 API요청을 시작하는 함수이고, 두번째 파라미터는 useEffect의 deps로 설정함 2. 필요한 시점에 API를 요청하고 싶으면 skip이라.. 2022. 11. 2. 10.30.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-1 챕터리뷰 [ 새롭게 알게된 것 ] 1. useEffect 첫번째 파라미터에는 async 함수를 사용할 수 없음을 알게됨 대신 함수 내부에서 async를 사용하는 새로운 함수를 선언해주어야 함 useEffect(() => { const fetchUsers = async () => { ... }; }, []); 2. 로딩상태관리 로직을 알게됨 초깃값은 false로 설정해줌 useEffect를 사용해 컴포넌트가 마운트 되는 시점을에 로딩상태를 true로 변경해서 '로딩중'이라는 문구를 보여주고 마운트 완료된 시점엔 다시 false로 초기화 해줌. 3. 버튼을 눌려서 API 재요청 기능구현할땐 fetchUsers 함수를 바깥으로 꺼내 버튼과 연결해야됨 앞서 1번 내용중 useEffect 첫번째 파라미터에 async 함수.. 2022. 10. 30. 이전 1 다음 728x90
