[TIL] 15일차

15일차 시간표

오전 9:00 ~ 오전 9:30 팀 회의

오전 9:30 ~ 오전 11:00 기능 구현

오전 11:00 ~ 오후 12:00 점심시간

오후 12:00 ~ 오후 1:00 기능 구현
오후 1:00 ~ 오후 2:00 팀 과제 수행

오후 2:00 ~ 오후 5:00 기능 구현

오후 5:00 ~ 오후 6:00 개인시간

오후 6:00 ~ 오후 7:00 저녁시간

오후 7:00 ~ 오후 9:00 기능 구현 

 

styled-components 자동완성 하는 법

2021.11.17 - [더 알아보기/팁] - styled-components 자동완성 패키지

styled-components 자동완성 패키지

 

기능 구현하면서 느낀 점

 

라우팅이나 Component, 가상돔은 어느정도 이해를 한 것 같은 데

Ref나 Event Listener에 대해서는 이해가 부족한 거 같아서 강의 외에도 더 찾아보고 정리 해보면 좋을 것 같다.

 

자바스크립트로 코드를 구현 할 떄는 새로고침을 안하면 바뀐 부분을 확인하기 어려워서 불편 했었는 데

리액트는 코드를 저장만 하면 어떤 부분이 오류를 일으켰는 지 직관적이고 자세히 알려줘서 더 편리 한 것 같다.

 

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

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

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

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

그럼 useState랑 for문 써서 할 수 있는 거 아닌가?라는 생각이 들었고

 

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

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

setStarStyle(['Star', 'unStar', 'unStar', 'unStar', 'unStar'])

 

리액트는 확실히 기초를 탄탄히 해야 하는 것 같다.

 

+ 팀원분이 알려주신 리액트 라이브러리!

https://ko.reactjs.org/docs/getting-started.html#learn-react

시작하기 – React