FACTS(사실, 객관) : 내가 한 일
과제 제출 전 Context로 리팩토링하는걸 더 깊게 해보기 위해 힌트를 들었고, 내가 한건 10중에 2...? 3..? 정도였다는걸 알게되어 다시 리팩토링을 진행함
막힌 부분은
<PokemonList pokemonList={MOCK_DATA}/>
이렇게 포켓몬 리스트에 mock데이터를 pokemonList로 보내줘야 하는데 이걸 context로 하려고 pokemonList부분을 주석처리하고
const pokemonList = { MOCK_DATA };
pokemonList에 { MOCK_DATA }를 정의한 후
<PokemonContext.Provider value={{pokemonList}}/>
이렇게 value값에 넣어주고,
const { pokemonList, navigate } = useContext(PokemonContext);
return (
<ListContainer>
{pokemonList.map((pokemon) => {
list.jsx에서 이렇게 사용했더니
오류가 .. pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야! pokemonList.map은 함수가 아니야!
당황했지만 이건 단순히 pokemonList를 정의할 때 MOCK_DATA에 중괄호로 감싸서 그런것..
const pokemonList = MOCK_DATA;
이렇게 수정해 해결했다.
그리고 모든 카드의 버튼이 "삭제"로 바뀌는 문제가 있었는데 이것은 props로 받아오는 값들에 대한 이해가 부족해서 그랬던 것이다.
나는 useContext를 사용하면 props로 가져오는 {중괄호}에 포함된 모든 값들을 지우고 모두 useContext로 가져와야 한다고 생각했는데, props로 가져올건 가져오고, useContext로 사용할건 useContext로 사용해야했던 것.
예를 들자면,
const PokemonCard = ({ pokemon, isSelected }) => {
Card.jsx에서 가져오는 이 isSelected 는 List.jsx에서 카드가 선택됐는지 안됐는지 boolean값을 가져오는 것이다. 반면에 PokemonContext의 value로 들어가 있는 selctedPokemon은 선택된 카드의 정보를 갖고 있는 것이므로 둘이 하는 역할이 다르다!
그러므로 Card.jsx에선 isSelected를 props로 가져오는 것이 맞음!
이렇게 리팩토링을 완료해 일단 과제를 제출하고 선택구현사항에 도전했다.
페이지 이동시에도 상태관리 하는것은 시간이 너무 걸릴거같아 먼저 해낼 수 있을거 같았던 UI라이브러리 활용하기부터 해보기로.
선택한 라이브러리: npm react-toastify (https://www.npmjs.com/package/react-toastify)
alert창 대신에 이쁘게 꾸며진 경고창을 띄울 수 있다.
이렇게!
터미널에 명령어를 입력해 먼저 패키지를 다운받는다
$ yarn add react-toastify
나는 npm이 아닌 yarn을 사용하고 있어서 yarn으로.
그리고 다운로드받은 패키지를 import 한다.
import { ToastContainer, toast, Bounce } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
사실 안해도 될 것까지 import한건지도 모르는데 사용하고 있지 않다는 메시지가 뜨지 않는걸 보니 잘 가져온거같다.
그리고 데모페이지에서 알림창이 뜰 위치, 배경색, 타입(성공/경고/에러 등)을 원하는 모양으로 꾸며본다.
데모페이지: (https://fkhadra.github.io/react-toastify/introduction/)
🚀Show Toast를 클릭하면 알림창을 미리볼 수 있다! 다 꾸며본 후 위의 코드를 긁어온다.
이걸 그대로 갖다 넣으면 꾸며봤던 알림창을 그대로 띄울 수 있다.
나는 두번째를 사용했는데 return아래엔 그냥 <ToastContainer /> 만 작성하고 설정값을 위에서 변수로 따로 선언해줬다.
const errorMessage = (message) =>
toast.error(message, {
position: "bottom-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
transition: Bounce,
});
메시지는 현재 내가 띄우고 있는 alert의 종류가 두개여서 (1.최대 6개만 추가할 수 있음 / 2.이미 추가됨) 인자로 넘겼다.
그리고 기존에 alert를 return하던 곳에
return errorMessage("최대6개만 추가할 수 있음");
이렇게 넣어주면 정상적으로 작동된다!
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
그냥 기능구현도 벅찰거라 생각했는데 이번 개인과제에선 생각보다 더 많은걸 시도하게 되어서 너무 뿌듯하다
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
useContext로 리팩토링한다고 모든 props를 지워선 안된다.. 지우려는 props가 useContext의 value로 사용되는 것인지 잘 확인해보자
UI라이브러리 toastify로 alert 대체하기
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지