3주차 개인 과제

개인 과제 요구사항

---

11월 16일

리액트 기초 강의(3-6)까지를 기반으로 개인 과제를 시작했습니다.

 

1) 메인 페이지와 평점 남기기 페이지의 기본 view 설정

-> Route 쓸 때 주의 할 점

: Route를 사용해서 path나 component를 설정 할 때는 App.js에서 설정 해주고
다른 컴포넌트에서 다른 path로 이동 해야 할 때는 useHistory에 history.path를 써서 이동해야 한다.

 

2) 세모를 누르면 평점 남기기 페이지로 이동하는 기능

 

3) 평점 남기기 페이지에 요일 받아오기

-> useHistory를 사용해서 경로를 이동 시켜 주었고, 각 요일을 가지고 이동해야 하기 때문에

pathname과 state를 사용 해줬습니다.

 

(history.push 할 때 값을 넘겨주는 방법)

-> onClick=()=>{history.push({pathname:'/이동할 주소', state:넘길 값})}

WeekList.js

LeaveARating.js

+ 오늘 평점 남기기 페이지에서 addEventListener을 사용해서 동그라미를 누를 때마다 각각 색상이 변해야 하는 데

ref를 check로 설정했더니 각각 설정이 안되서 마지막에 있는 div만 노란색으로 변했다.

내일은 아래 두가지 기능 해결해야 한다!

1) addEventListener 버튼마다 따로 적용하는 방법 하나하나 입력 하려면 너무 코드가 지저분 해지기 때문에
2) 메인 페이지의 평점이 랜덤으로 반영되는 기능

---

11월 17일

 

평점 남기기 페이지 기능 구현 할 때

Event Listener 쓸꺼야!!! 하고 시도 했었는 데 클릭 할 때마다 어떻게 색상을 변경 시켜야 하는 지 찾아보다가

style에 삼항 연산자를 사용 할 수 있다는 걸 보고

style={starStyle[0]==='unStar'?unstar:star}

그럼 useState랑 for문 써서 할 수 있는 거 아닌가?라는 생각이 들었고 useState를 사용해서 초깃값을 배열로 넣고

for문을 돌려서 몇번째 div를 눌렀는 지 인자로 받아서 useState에 있는 배열의 값이 바뀌면서 색상이 변할 수 있도록 구현했다.

 

+ useState에 초기값으로 배열을 넣었다면 배열의 요소 값을 바꿀 때도 배열로 해야 한다고 해서 해답을 찾았다.

let [starStyle, setStarStyle] = React.useState(['unStar', 'unStar', 'unStar', 'unStar', 'unStar'])

---

11월 18일

 

S3에 버킷 만들어서 과제 호스팅 했다.

http://starleave.project.s3-website.ap-northeast-2.amazonaws.com/

React App

---

react-icons

 

https://react-icons.github.io/react-icons/

React Icons