My Project 01_220811

# 시작의 한마디

어느정도 해결점을 찾아가는거 같다. 기존에 했던 코드들과 강의를 잘 비교해서 남은 문제들을 해결해 보자!

 

# 업무 중 이슈/고민 .. 그리고 해결한 내용

• [이슈-0718] 여러개의 아이템 리스트가 있을 때 리스트에 아이템을 클릭하면 상세페이지로 이동하나 등록되어 있는 아이템이 모두 나타난다. 
  • [0718] - usePrams를 사용해서 해결하는 방법이 있는지 확인 중..
  • [0720] - item을 등록할 때 id 값을 useRef(1)로 id가 1부터 시작하도록 했다. 그런데 오늘 또 다른 문제점을 파악했다. 등록하고 id의 값이 1 더해져야 하는데 그대로 1만 나오고 있다. 왜 등록 후 id가 1 더해지지 않을까.. 확인하고 있다...
  • [0724] - 아직 어떤 문제일지.. 파악이 안된다..
  • [0805-0809] - 문제해결 못함.. 강의 보면서 문제점 찾고 공부하기로 판단
  • [0810] - 상세페이지에 원하는 id 값을 가져오는 실마리가 풀림.. 그러나 여전히 완전한 해결은 아님..
  • [0811] - 문제 해결! 아래 내용 참고

# 개발 업무내용

[오늘의 한 일]

• 아래와 같이 문제를 해결했다.

1. 어제 Router.js 에 target의 id를 find() 함수를 이용해 찾는 방법을 했는데 이렇게 하지 않아도 됐었다. 의미가 없는 코드.. 였다..
2. Router.js에서는 전체 데이터와 id 값을 state에 저장해 list가 있는 곳과 detail 페이지에 props로 전달해주었다.

3. ItemList.js 에서는 기존에 함수를 만들어 detail 페이지로 들어가도록 했는데 제목 태그에 직접 함수로 페이지에 접속하도록 했다.

<div onClick={() => navigate(`item-detail/${item.id}`)}>{item.name}</div>

4. ItemDetail.js 에서는 전달받은 props를 가지고 배열의 길이가 0보다 크면 .find() 함수로 item.id와 id 값이 같으면 state에 저장하도록 했다.

function ItemDetailed({ userObj, getItems }) {
    const [itemId, setItemId] = useState({});

    const { id } = useParams();

    useEffect(() => {
        if (getItems.length > 0) {
          const targetItem = getItems.find((item) => item.id === id)
          console.log(targetItem)
          if (targetItem) {
            setItemId(targetItem)
          }
        }
      }, [getItems, id])

      ...

  }

5. 그리고 이 itemId state를 가지고 필요한 값들을 가지고와 디테일 페이지를 완성했다.

• url을 보면 item-detail/id 값이 나오는 것을 확인할 수 있다.

• 정말 긴.. 시간동안 이 문제를 다루었다... 덕분에 상세페이지를 만들 때 어떻게 해야하는지 이해가 잘 되긴했다.
• 참 의미가 있는 시간이 되었다. 이렇게 또 성장한 것인지..? 하하하
• 전체리스트에 대한 상세페이지는 완료했다.
• 이제 위시리스트에 대한 상세페이지를 위에 했던 방법과 같이 해결하면 될 것 같다.

# To-do List

[주요 일정]

• [이슈-0718] 문제 마무리하기