week list 클론 연습

설치 되어 있어야 되는 것 

 

- nvm

- node 

- npm

- yarn

 

#옵션 global은 전역에 이 패키지를 깔겠다는 뜻입니다.

 

• yarn add global create-react-app
• yarn add react-router-dom@5.2.1  ✔️
• yarn add styled-components ✔️
• yarn add react-icons ✔️

이 패키지는 프로젝트 경로에 설치 해야된다.

 

프로젝트 생성

 

yarn create react-app 프로젝트명

 

 

📍 구현기능

1. router를 이용한 페이지 이동
2. 페이지 접속시 랜덤으로 평점 값이 입력되어 평점이 출력되게 하는 기능
3. 리뷰 페이지에서 평점에 클릭시 갯수에 맞게 색이 바뀌게 하는 기능

 

 

 

 

🧑‍🏫 코드 동작 원리와 데이터 움직임을 파악하는것을 중점으로 공부를 하자

 

- 중요

1. state에 대한 설명 잘나와있는곳

> https://velog.io/@jjunyjjuny/React-useState%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%A0%EA%B9%8C

 

2. key값에 대해 생각하면서 코드 짜자.

의문 ?) 별점 같은데는 key값이 idx로 그냥 해도되는건지?? 아니면 그냥 고유하게 key값을 넣는게 좋은지??

 

- 메서드 (사용원리에 대해 좀 알아보자)

• from
• map

 

 

⚠️  문제점 

 

🙋‍♂️ map 메서드의 사용 원리가 잘 이해가 가지 않는다.

➡  https://www.youtube.com/watch?v=vUB3TfLWzL0

 

🙋‍♂️ key 값은 언제 붙여야되며, 왜 중요한지 조사해보자.

➡ https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-key%EA%B0%92%EC%9D%98-%EC%9D%98%EB%AF%B8/

 

🙋‍♂️ react 렌더링 할때 데이터값을 조심해야 겠다....

➡ https://velog.io/@bigbrothershin/React-Objects-are-not-valid-as-a-React-child-%EC%97%90%EB%9F%AC-%EC%B2%98%EB%A6%AC

 

 

 

- Link

https://github.com/crown0205/prac_react_week1

GitHub - crown0205/prac_react_week1: week1 clone project

 

 

 

---

 

키보드를 눌렀을때 키보드 값을 받아서 이벤트를 발생해야되는데, useEffect에는 3가지 방법이 있다.

밑의 블로그에 자세히 예시와 설명이 있다. 

 

useEffect 란?

https://ko-de-dev-green.tistory.com/18

React hooks 리액트 훅 useEffect란?