0818 리액트
리액트 프로젝트
컨셉 영화어플
라우팅
홈(메인)
- 검색
- 즐겨찾기
- 로그인(형태만)
https://codepen.io/marcobiedermann/pen/xxeeXw
컴포넌트
라우팅
페이지네이션
모바일 퍼스트
디자인 참조
https://www.figma.com/community/file/1136503108209841757
https://www.figma.com/community/file/1140141575198498248
<상세페이지>
Movie.js의 영화제목을 클릭하면 라우팅 된 Detail.js페이지로 <Link to={} state{}/>형식으로 주소값과 state값을 전달하며
Deatil.js페이지로 화면전환 후 useLocation()함수를 이용하여 전달 받은 state값 출력
<예매하기 토글버튼>
Deatil.js페이지의 예매하기 버튼은 Reserve.js 컴포넌트를 통해 이루어진 것이며 버튼 클릭 시 useState값으로 예매화면을
토글로 나타내었다.
<좌석>
좌석은 빈 배열에 .push로 반복문으로 만들었으며 api값이나 저장 된 데이터는 아니며 이중 for문을 사용할떄 변수값조합으로
좌석 번호를 버튼의 value값으로 지정하고 나타내었다.
좌석의 선택 유/무는 onClick이벤트 사용하여 좌석버튼의 className을 사용하여 색 변경 / 좌석버튼의 value값 사용하여 좌석정보useState
<예매자>
input박스에 값 입력 시 useState로 현재 값 저장
<시간선택>
select박스의 값 선택 시 useState로 현재 값 저장
<필수값 확인>
마지막의 완료버튼 클릭 시 onMouseUp을 사용하여 checkDate함수(함수 호출 시 property값을 파라미터로 전달) 에서 좌석,예매자,시간에 대한 조건비교 후
useNavigate()함수를 사용하여 변수값("주소값", {state: }) 방식으로 ResFinished.js로 이동
<예매확인 페이지>
useLocation()함수를 이용하여 전달 받은 state값들 출력
/--------------------------------------------------------/
<App.js>
Route 활용하여 페이지 전환
context 기능 사용하기 위하여 Router 가장 밖에 MovieProvider로 감싸준다.
MovieContext.js 안에 value값 likeDate, setLikeDate를가지는 MovieProvider정의 및 props를 이용하여 전달
<메인 페이지>
Main.js에서 Main_poster를 부르고 Main_poster에서는 axios를 이용하여 네이버 api의 영화 검색 기능을 사용
네이버 api 검색 기능 특성상 query(영화제목) 값이 필수로 들어가야하기 떄문에 임의로 어벤져스 값을 넣어
ImageSlider 기능과 함께 포스터 화면 구현
<하트(즐겨찾기) 기능>
Context를 이용하여 likeData, setLikeData 불러오기
빈하트 클릭시 > fillIcon 호출하여 concat을 활용하여 값 배열에 추가
꽉찬 하트 클릭시 > emptyIcon 호출하여 filter를 활용하여 값 배열에서 삭제
map함수를 활용하여 likeData배열 안의 id 값과 상제페이지(location값)의 id 값을 비교하여 이후에 상세 페이지
열었을떄 하트 상태 지정
<즐겨찾기 페이지>
하트 기능을 활용하여 likeData에 넣은 값을 읽어 화면에 출력
/--------------------------------------------------------/
1) - naver api 의 정보를 받아 검색기능 구현
- api 사용을 위해 axios를 설치 사용했습니다.
전반적인 진행 흐름
렌더 후에 useEffect 가 실행되기 때문에 loding 을 만들어서 처음
렌더시에는 로딩중을 표시하고 이후 useEffect 에 있는 getMovies 를 실행하여
영화정보를 가져와 state 를 변경하면 리액트는 그내용을 다시 호출하여 보여주도록 하는것
key 값을 입력해줍니다.
영화정보를 state 에 저장해줍니다.
onchange 를 사용하여 검색어를 입력하면 실시간으로 value(검색정보)를 state 에 저장합니다.
handleSubmit 은 input 에서 엔터를 입력시 정보가 전송되는 기본 이벤트 이며
해당 이벤트가 발생시 getMovies 함수를 실행하도록 하였습니다.
다만 해당 이벤트 고유기능은 사용을 안하기 때문에 e.preventDefault(); 를 사용하여 사용 못하게 했습니다.
그후 state 값에서 movies 를 map 을 이용하여 화면에 뿌려줍니다.
movie = search 에서 영화 정보를 렌더링 해서 보여주는 화면 부분
전달 받은 자료를 문법대로 바꿔주는 js
2) - 검색한후 나온 자료를 페이지네이션으로 정리정렬
처음 만든 페이지 네이션은
제이슨 파일을 변수에 저장해서
변수.data 를 set 값에 다시 넣어주고
그후 set값과 동일한 변수(usestate([])) 를 포스트에 넣어서 진행 했다면
저희는 이미 검색한 영화값인 movies 가 있기 때문에 이런 과정을 생략하고
바로 movies 를 포스트에 넣어주고 기존에 정보를 뿌려주던 movies.map 을 포스트에
넣어줌으로 페이지 네이션을 만들었습니다.
/----------기능-----------/
/----------개발배경-----------/
문화생활에서 많이 접했던 단어들과 정보내용들이라 웹페이지 구현 시 화면구성이 용이하다
생각하여 주제를 영화로 잡았다. 웹앱으로 실사용에 초점을 맞추어 진행?
/----------API선정-----------/
공공데이터포털(정보산업진흥원:영화정보API)API -> api내용부족으로 API
OMDB -> 네이버API에 줄거리 데이터가 없어서 OMDB의 API를 사용하려 하였으나 승인이 나지않아 사용실패 ->네이버API
/------ 진행방식 ------/
기능 별로 각자 구현하여 지정 일자에 소스정리 및 취합
/------ 화면설계 ------/
<초안>
1. 메인
2. 로그인
3. 검색 및 결과 리스팅
4. 상세페이지
4.1 상세페이지 정보출력
4.2 wish기능
<변경안>
1. 메인
2. 로그인 -> 제외
3. 검색 및 결과 리스팅 -> +페이지네이션
4. 상세페이지
4.1 상세페이지 정보출력 -> +예매기능 + 4.1.1 예매정보페이지
4.2 wish기능 -> + 4.2.1 위시리스트 페이지
