일일회고 Day-41

20220415 토요일

오늘의 도전과 배움

1. data.js로 데이터 따로 저장해서 불러오기 & useState 사용하기
2. vanilaJs로 구현했던 페이지 React로 바꿔보기
3. 웹 토이 프로젝트 설계서 자료 조사
4. 스터디 6주차 과제 read me 작성하기 & 제출

1. data.js로 데이터 따로 저장해서 불러오기 & useState 사용하기
   https://fresh-mint.tistory.com/82

2. vanilaJs로 구현했던 페이지 React로 바꿔보기
   jsx로 컴포넌트 쪼개보고, map함수를 써서 여러 데이터를 한번에 다 늘어놓도록 해봤다. 몇번이나 배운 건데도 아직 쓰려고 하면 바로 코드를 작성하는 게 안된다. 그래도 오늘 또 써봤으니 조금 더 익숙해지겠지

• 두 개의 컴포넌트가 하나의 div안에 위치해야 해서 처음에는 각 컴포넌트마다 div를 써줬더니 css가 두번 적용이 되었다. 이렇게 저렇게 시도하다가 div의 위치를 컴포넌트 밖으로 꺼내 html안에 넣고 div안에 두 개의 컴포넌트를 넣으니 문제가 해결됐다!

• 한 컴포넌트 안에 버튼과 map을 해야하는 밸류값이 있었는데, 컴포넌트 자체를 html에서 map으로 돌리면 버튼도 여러번 만들어져서 다른 방법을 찾아보았다.

• map부분만 복사해서 html에 넣어보기
  : 원하지 않는 곳에 데이터가 나왔다. css를 맞춰주려고 html안에 같은 className을 가진 div를 써줬더니 같은 css를 가진 div가 두개 출력되었다..
  

• 버튼과 map함수 돌릴 데이터를 두개의 컴포넌트로 분리하기
  : 이렇게 하니까 해결이 되었는데, 버튼은 반복이 필요 없으므로 다른 컴포넌트로 분리하고 map을 돌릴 컴포넌트는 props를 가진 코드만 작성 한 후 html에서 컴포넌트를 map으로 돌렸다.

궁금한 점, 어려웠던 점

아직도 리액트를 잘 쓰려면 멀었구나..! 그래도 조금씩 컴포넌트 나누고 상태관리하는 거 연습하면서 익숙해져야지~

내일 해보고 싶은 점, 방향

스터디 과제,블로그 제출하기 !