리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료.

1. 필수 요구 사항

• styled-components 를 이용하여 스타일링
• 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정
• styled-components에 props를 넘김으로 인한 조건부 스타일링 적용
• 팬레터 등록 시 id는 uuid 라이브러리를 이용

2. [3단계] 중 [1단계] 구현

1. props-drilling 브랜치 : useState만으로 상태관리해서 코드 작성
2. context 브랜치 : props-drilling의 작업 코드로 react context API를 사용 (전역상태를 이용한 코드로 리팩터링)
3. redux 브랜치 : 모두 redux 라이브러리를 이용한 코드로 리팩터링

3. 배운 점

• 특정 멤버의 댓글 클릭 > 상세페이지 이동 > 수정/홈으로 이동시 특정멤버가 아닌 처음 멤버로 이동

(1) 문제 파악: 이 부분은 useState의 개념을 제대로 파악하지 못하여 발생.

(2) 해결 : useState의 setData 부분에 선택된 멤버의 데이터 값을 넣어줘야 했음.

(3) 대안: 브라우저의 localStorage 또는 url path에 queryString 사용!

=> 페이지가 이동하면서 라이프사이클이 unmount되기 때문에 localStorage를 활용 추천!

 

 

4. 내일 할 일

• [3단계] 중 [2단계]: context 브랜치를 생성 후 context API를 사용하여 리팩터링 하기!

 

끝.