[React] 리액트 숙련주차 개인과제 (FanLetter 만들기 - 에러 발생 및 해결)

🔥 React 숙련주차 개인과제 🔥

 

 

✔️ 구현해야 할 기능

· 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제)

· 아티스트별 게시물 조회 기능 구현 (Home - Read) 

· 원하는 아티스트에게 팬레터 등록 구현 (Home - Create) 

· 팬레터 상세 화면 구현 (Detail - Read)

· 상세화면에서 팬레터 내용 수정 구현 (Detail - Update)

· 상세화면에서 팬레터 삭제 구현 (Detail - Delete)

 

 

✔️ 과제는 Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 한다.

 

 

💡Hint (과제 진행 순서)

(1) 프로젝트 셋업

(2) “props-drilling” 브랜치 생성 및 이동

(3) Router 셋업

4) 전역스타일링 적용

(5) 홈 화면 UI: 배너 및 헤더 파트 UI 구현

(6) 홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현

(7) 팬레터 입력창(AddForm) 작성하여 팬레터 등록 기능 구현

(8) 홈화면의 팬레터 클릭 시 상세화면으로 이동 구현

(9) 상세화면 UI 구현

(10) 팬레터 삭제 기능 구현

(11) 팬레터 수정 기능 구현

(12) “context” 로 브랜치 생성 및 이동

(13) props drilling으로 불편하게 관리하던 state를 context api 로 리팩터링

(14) “redux” 로 브랜치 생성 및 이동

(15) context 로 관리중이던 모든 것을 redux 로 리팩토링

(16) 15단계까지 모두 완료하셨다면 선택구현사항들에 도전해보기

 

 

---

 

⛔ 에러 발생

 

: 값이 정의되지 않아 읽을 수 없을 때 발생한다

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

    

 

 

 

컴포넌트화가 조금은 되어있었지만 더 복잡해지기 전에

세분화를 하려다가 오류가 발생했다

 

 

map과 filter가 순회하려는 배열에서 자꾸 오류난다고 떴다

각 컴포넌트 파일에서 그 배열을 찍어보면 오류 없이 잘 나오는 것도 문제였다

어디서 꼬여버린지 찾기 힘들었다

 

 

 

 

 

❗해결과정

콘솔창에는 배열이 잘 나오니 아마 컴포넌트 문제라고 생각하고

하나하나 꼼꼼히 찾아보았다

우선 나의 파일 구성은 아래와 같다

 

 

 

App.js

↓

Home.jsx

Detail.jsx

↓

componets 폴더 안에 여러 컴포넌트들

 

 

부모 컴포넌트인 Home.jsx에서 자식 컴포넌트 LetterBox.jsx에 props를 해주었는데

형제 컴포넌트 Form.jsx에서도 LetterBox.jsx에 props를 해주니까

자식 컴포넌트에서 에러가 난 것이다. 한 번에 두개를 받으니 에러가 날 수 밖에!

그래서 Form.jsx에서 내려주어야 할 정보들을  Home.jsx에 다 옮겨놓고 각각 props를 해주어서

오류를 해결했다

 

 

⭐리마인드

컴포넌트 해야 할 부분을 미리 구성하고 시작하는 것은 엄청 중요하다

 

 

🔗컴포넌트 구성 참고사이트

https://ko.react.dev/learn/thinking-in-react

 

 

 

---