FACTS(사실, 객관) : 내가 한 일
어제 못한 리스트에서 버튼은 계속 추가로 남겨두고 이미 추가된 포켓몬을 추가하려고 하면 경고 alert가 뜨는 그거를 함
이렇게 이제 추가버튼이 삭제로 바뀌지 않는 대신 경고창이 뜬다!
방법은 리스트에서 카드를 불러올 때, 선택된 상태를 무조건 false로 두고 (isSelected = {false})
Dex.jsx에서 포켓몬을 이미 추가했는지 확인하는 addPockemon함수를 넣어 경고창이 뜨게 만들었다.
그리고 대시보드의 경우, 예시페이지에서는 이미 있는 6개의 div가 리스트에 있는 카드div로 바뀌는데 내가 만든건 아무것도 없는 대시보드에 div가 추가되는 것이어서 이걸 수정해야 하나 여쭤봤더니 기능만 된다면 굳이? 라고 하셔서 일단 두고 useContext로 리팩토링을 진행하기로 함.
이전에! 배웠던 내용을 리마인드하기위해 강의를 보면서 더 공부함 아래는 그 내용이다
useContext
자식 컴포넌트 => 자식 컴포넌트 => 자식 컴포넌트 => 자식 컴포넌트=> ... 가 많아지면 prop drilling 현상이 일어나는데 이게 너무 깊어지면 prop이 어디서부터 왔는지 파악이 어려워지고 어떤 컴포넌트에서 오류가 생기면 추적이 힘들어져 대처가 늦어짐 그래서 이걸 리팩토링 하기 위해 사용되는 hook이 useContext 인것!
contextAPI를 쓰게되면 특정공간에 있는 모든 컴포넌트들에 접근할 수 있음 => 전역 데이터를 관리
- `createContext` : context 생성
- `useContext` : context를 구독하고 해당 context의 현재 값을 읽음
- `Provider` : context를 하위 컴포넌트에 전달 [중요!]
그치만 이것도 만능은 아니며! provider에서 제공한 value가 달라지게 되면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링됨 => value부분을 신경써야 한다
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
흥미롭다
내가 이걸 잘 활용해서 리팩토링할 수 있을까?
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
useContext
강의보면서 리팩토링 따라하다 에러가 났는데
console.log(data)를 잘못 넣어서 난 에러였음 그냥 이거 한줄만 지우면 됐던 에러였는데,
단순히 콘솔에 찍어보는 명령어라 생각해 여기서 에러가 나도 나머지 코드엔 문제가 없어 정상적으로 나올 줄 알았는데 아니었던 것!!! console.log(data) 이 한줄 때문에 작성한 모든 코드가 안보이고 계속 에러가 뜸!!
console.log도 잘 두드려보고 사용해야겠다
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지
당장 내일부터 useContext로 개인과제 리팩토링