[React]9. useEffect 실습

 

React_09_useEffect 실습

 

[가위바위보 게임]

<가위바위보 게임 만들기 단계>

    (1)나의 선택, 컴퓨터의 선택, 결과 state 생성: 가위바위보를 0,1,2 숫자로 설정

    (2)나의 선택 설정: 클릭한 버튼값에 따라 0,1,2값을 설정

    (3)컴퓨터의 선택 설정: 0,1,2 랜덤 수 설정(난수 생성)

    (4)게임 결과 판별: useEffect 사용하여 정확한 시점 지정

 

1. 가위바위보, 결과값 State 생성

 

2. 클릭한 가위바위보 값을 숫자로 바꿔서 저장하기

 

3. 가위바위보 승부 판별하는 함수

-승리: 사용자(가위, 바위, 보), 컴퓨터(보, 가위, 주먹)

-패배: 사용자(가위, 바위, 보), 컴퓨터(주먹, 보, 가위)

 

4. 클릭한 가위바위보 이모티콘과 결과값 출력

-이모티콘 출력: 이모티콘 배열[State 값]

-가위바위보 버튼 출력: map 함수, 가위바위보 함수 적용하기

 

[Axios]

1. Axios: 브라우저, node js를 위한 Promise 기반 HTTP 비동기 통신 라이브러리
2. Axios 환경설정

1)Axios 설치: npm i axios

 

2)Axios import: import axios from ‘axios’

 

3. Axios 구조: axios.get(url).then(성공 callback).catch(실패 callback)

[영화진흥위원회 API 실습]일일박스오피스 TOP 10의 영화제목과 개봉일 가져오기

*영화 진흥위원회 API 홈페이지: 

https://www.kobis.or.kr/kobisopenapi/homepg/main/main.do

 

*사용할 데이터 url: 날짜를 현재 날짜로 변경(targetDt=날짜)

https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230815

 

• 데이터 가져올 url 

 

• 영화정보 State(빈 배열) 생성

 

• useEffect 내에서 axios로 데이터 받아오기

-렌더링할 때마다(didMount) 실행되도록 빈 배열 생성

-axios.get(url).then(성공 callback).catch(실패 callback)

 

• 영화 정보(순위, 영화명, 개봉일) 출력하기(map 함수 이용)

 

(결과화면)

[NASA API]최근 일주일간 APOD(Astronomy Picture of the Day) 가져오기

• 나사 API 홈페이지 https://api.nasa.gov/

• Generate API Key: 이메일로 API Key 전송하기 위해 정보 입력

 

• Browse APIs-APOD 탭 열기

 

 

• HTTP Request 기본 주소 뒤에 Query Parameter 추가하기

-start_date: 시작하는 날짜, end_date: 끝나는 날짜

-api_key: 이메일로 발급받은 key 값 

 

 

• 데이터 가져올 url

• nasa 데이터를 저장할 useState 선언

 

• useEffect로 데이터 받아오기(axios)

 

• 데이터 사진 출력하기

 

(출력결과)