react.js 2

React ToyProject (2) 영화 순위 정보 제공 페이지 만들기

🎬 Intro 저번에 만든 날씨 정보 제공 페이지에 이어 이번에는 영화 순위 정보를 제공해주는 페이지를 React를 이용해서 만들었습니다. 주 방법은 axios를 이용하여 API를 제공받아 화면에 출력하는 것입니다. App.js moviedata , date , inputdate라는 이름을 가진 State를 만들어줍니다. moviedata는 axios를 이용하여 받아온 정보들을 넣어둘 state이고 date는 날짜 정보를 넣어둘 state , inputdate는 input 태그에 날짜를 입력할 때 사용할 state입니다. 먼저 useEffect와 axios를 이용하여 날짜 정보를 받아옵니다. 이때 date state를 이용하여 API 주소 뒤에 붙여줍니다. 기본적으로 date state의 초기값은 202..

React 2021.07.13

React ToyProject (1) 날씨 정보 검색 페이지 만들기

🌡️ Intro 날씨 정보 API를 이용한 날씨 정보를 검색하면 보여주는 페이지를 리액트로 구현했습니다. App.js 먼저 main과 city 라는 state를 만들어줍니다. main이라는 state는 axios를 이용하여 받아온 데이터를 저장하는 state이고 city라는 state는 검색에 이용되는 state입니다. openweathermap.org 사이트에서 오픈 API를 이용하여 axios로 날씨 정보를 받아 main이라는 state에 넣어줍니다. React Hooks 인 useEffect를 이용하여 component가 화면에 렌더링 될 때 받아올수 있도록 해줍니다. 그 후 dependency 배열 값에 city를 넣어주어 검색하는 값이 바뀔 때마다 다시 렌더링 될 수 있도록 설정합니다. 이제 A..

React 2021.07.13