React Project 1

svg 활용법

React에서 svg 활용법

import { ReactComponent as Icon } from "../";

function Something() {
  return (
    <div>
      <Icon />
    </div>
  );
}

React Router

npm install react-router-dom

react router 바뀐 것들

https://velog.io/@soryeongk/ReactRouterDomV6

이쁘게 import 방법

https://stackoverflow.com/questions/70807477/react-import-multiple-components-from-a-folder

자식에서 부모로 데이터 전달 방법

https://velog.io/@soral215/React-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B3%B4%EB%82%B4%EA%B8%B0

https://cocoon1787.tistory.com/841

class list 추가 방법

https://bobbyhadz.com/blog/react-add-remove-class-on-click

문제점 발생

로컬이라서 upvote 버튼을 누르면 target을 찾아서 innerText를 바꾸게 만들었다. 근데 이렇게 작성하니 detail 페이지로 넘어갈때 upvote 데이터를 같이 데리고 가야 하는데 따로 가는 문제점이 발생했다. 그렇다고 아이디값을 저장해둔 state가 있긴했지만 이걸 또 넘겨주면서 로딩할 때 체크해서 하기에는 번거롭고 코드가 지저분해질 것 같았다. db가 아니었기에 json으로 간단하게 업데이틀 해주고 싶은데 곰곰히 생각하다 보니 아예 state에 json을 통채로 넣는 것이 어떤가 싶다. 그리고 업데이트 해주면 더미 json 파일도 변경 안되고 업데이트만 할 수 있고 딱 괜찮은 것 같다.

전역으로 json을 관리하려고 하니 다 이어진 데이터라 upvote를 업데이트 하기 위해서 모든 데이터가 업데이트 되는 문제가 생긴다… 흠! 귀찮더라도 upvote만 따로 관리하는 state를 만드는게 좋겠지? 라는 생각이 든다.

문제점 2

upvote.. comment까지는 잘 됐는데 suggestion page의 comment 개수를 불러오지 못하는 불상사가 생겼다…! 그 이유는 context 값을 세부사항에 들어간 comment 개수만 카운트 해줘서 전체 comment 각각의 데이터가 없어서였다. comment 개수가 reply 개수 제외하고 인줄 알고 그냥 넘어갔는데 아니었다. 바보같이… detail page부터 하는 바람에 다시 갈아 엎게 생겼다…! 이참에 sidebar도 까먹고 있었는데 같이 진행해야 겠다. 상위 context에 하위 context를 또 넣어도 되나?

모든 내용이 업뎃 될때마다 호출되는 건 원치 않아서 필요한 부분만 업데이트 하고 싶다. 근데 어떻게?

suggestions page -> request 추가, 정렬, 내용, comments 개수

data.json은 크게 productRequests > comments > replies로 나뉜다. 그래서 replies 먼저 작게 업데이트할 때마다 저장하고 comments에 저장 가능? replies 바뀔 때 그러면 전부다 바뀌네 뭐야… 그러면 전부 데이터를 넣고 업데이트 하는거나 다름 없잖아! ㅋㅋㅋ 중첩이라서 어쩔 수 없나 보다. 그렇군

진행 순서를 정해놓고 해야 덜 꼬일 것 같다.

1. suggestions page

• comment 개수 해결
• context