useEffect2 리액트로 뉴스뷰어 만들어 보기(3) 뉴스 카테고리는 총 6개 입니다. business(비즈니스) science(과학) entertainment(연예) sports(스포츠) health(건강) technology(과학) API 카테고리는 영어로 되어 있어 카테고리 이름을 한글로 보여준 뒤 클릭시 영어로된 카테고리 값을 사용하도록 구현합니다. import styled from 'styled-components'; const categories = [ { name: 'all', text: '전체보기' }, { name: 'business', text: '비즈니스' }, { name: 'entertainment', text: '연예' }, { name: 'health', text: '건강' }, { name: 'science', text: '과학.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(2) 뉴스 API 데이터를 연동해보겠습니다. 컴포넌트가 보이는 시점에 API를 요청하면되는데 이때 useEffect를 사용하여 컴포넌트가 렌더링되는 시점에 API를 요청합니다. 여기서 주의해야할 점은 useEffect에 등록하는 함수에 async를 붙이면 안됩니다. useEffect에서 반환해야 한느 값은 뒷정리 함수이기 때문입니다. 따라서 useEffect 내부에서 async/await 를 사용하려면 함수 내부에 async 키워드가 붙은 다른 함수를 만들어 사용합니다. API 요청이 대기 중인지 판별하기 위해 추가로 loading 이라는 상태도 관리하겠습니다. loagding 중일때는 true, 끝나면 false 로 변경합니다. import styled from 'styled-components'; impo.. 2023. 6. 6. 이전 1 다음 반응형
