코딩하는 둥식이

✅ 개발자도구 API 테스트 fetch('https://learn.codeit.kr/api/foods?limit=2&search=토마토'); { "foods": [ { "id": 19, "title": "대추방울토마토", "calorie": 2, "content": "1개(15g)", "createdAt": 1625353806439, "updatedAt": 1625353806439 }, { "id": 3, "title": "방울토마토", "calorie": 2, "content": "1개(13g)", "createdAt": 1625330203116, "updatedAt": 1625330203116 } ], "paging": { "count": 3, "nextCursor": "JUVEJTg2JUEwJUVC..

1️⃣ 로딩시 더보기 버튼 비활성화하기 ① 현재 네트워크가 리쿼스트 중이면 true, 아니면 false값을 갖는 state 만들기 const [isLoading, setIsLoading] = useState(false); // 로딩 처리하는 state ② try~catch 구문 사용하기 const handleLoad = async (options) => { let result; try{ // 리퀘스트 시작 전 result = await getReviews(options); // response body에 있는 reviews라는 값을 Destructuring 하고 } catch(error){ console.error(); return; } finally{ // 리퀘스트가 성공하거나 실패했을 때 실행 (오류..

1️⃣ 초깃값 지정하기 ① 기본 const [state, setState] = useState(initialState); useState 함수에 값을 전달하면 초깃값으로 지정할 수 있음 ② 콜백으로 초깃값 지정하기 const [state, setState] = useState(() => { // 초기값을 계산 return initialState; }); - 처음 렌더링 할 때 한 번만 콜백을 실행해서 초깃값을 만듬 - 콜백 함수의 실행이 오래 걸릴수록 초기 렌더링이 늦어질 수 있음 (콜백 함수가 리턴할 때까지 렌더링하지 않고 기다림) 2️⃣ setter 함수 사용하기 ① 기본 const [state, setState] = useState(0); const handleAddClick = () => { se..

✅ 네트워크 스로틀링(Throtting) 기능 : 네트워크 속도가 느린 상황이나 오프라인 상태를 테스트 할 때 유용하게 사용 가능! ✅ 버그 수정 📌 비동기로 state를 변경할 때는 잘못된 시점의 값을 사용하는 문제가 있음!! ==> setter 함수에 값이 아닌, 콜백을 전달해서 해결 가능 📌 비동기 상황에서 state를 변경할 때 이전 state값을 사용하려면, setter 함수에서 콜백을 사용하여 이전 state를 사용함! 📝 이전 state값을 받아서 변경할 state값 return - prevItems는 고정된 값이 아니라 함수의 파라미터이므로 현재 시점의 state값을 전달 해 줌

🔎 페이지네이션(Pagination) : 데이터를 조금씩 나눠서 가져오는 것 📚 페이지네이션 종류 ◾ 오프셋 기반 페이지네이션 - 지금까지 받아온 데이터의 갯수 ◾ 커서 기반 페이지네이션 - 지금까지 받은 데이터를 표시한 책갈피 ⭐ 서버 입장에서는 커서 기반이 오프셋 기반보다 만들기 까다롭고, 데이터가 자주 바뀌는게 아니라면 오프셋 기반으로도 충분함! 1️⃣ 오프셋 기반 API로 추가 데이터 받아오기 ① api 테스트 fetch('https://learn.codeit.kr/7008/film-reviews?offset=0&limit=6') ==> 처음 데이터 6개가 불러와짐! ② api 테스트 - 이 다음 데이터 받아오기 fetch('https://learn.codeit.kr/7008/film-review..