240822

FACTS(사실, 객관) : 내가 한 일

useContext로 리팩토링하기에 앞서, 

디테일페이지에서 타입을 표시할 때 배열의 요소를 그대로 나열해 두가지 이상인 경우 구분하기 힘들다는 것을 발견

 

<p>타입: {pokemon.types.join(", ")}</p>

 

join을 이용해 요소 사이에 쉼표를 넣어 구분하기 쉽게 만들어줌

 

 

이제 해야 할 리팩토링 엄두가 나질 않음!

 

먼저 propdrilling이 일어나는 함수를 찾음

바로 카드를 추가해주는 함수

 

내가 만든 프로젝트의 컴포넌트들은 이런 구성인데, 

Dex.jsx에서 만들어진 addPokemon함수가  PokemonList.jsx에서는 사용되지 않고 그 자식 컴포넌트인 PokemonCard.jsx에서 사용되고 있는것! 이것을 useContext로 리팩토링

 

1. context폴더를 만들어 그 안에 AddPokemonContext.js 파일을 만듦

import { createContext } from "react";

export const AddPokemon = createContext(null);

 

2. Dex.jsx  =>  function Dex 의 리턴문 아래에 있는 것들을

<AddPokemon.Provider value={addPokemon}></AddPokemon.Provider>

 

이것으로 모두 감싸버린다

 

3. PokemonCard.jsx에 가서 useContext와 context로 사용할 AddPokemon을 import한다

import React, { useContext } from "react";
import { AddPokemon } from "../context/AddPokemonContext";

 

4. props로 받아온 addPokemon을 지워버린다!

 

5. useContext(AddPokemon)을 선언한다!

const addPokemon = useContext(AddPokemon);

 

6. 기존 AddPokemon이 있던 부분을 선언한 변수 addPokemon에 맞게 수정한다!

<Button onClick={(e) => {addPokemon(pokemon);}}>

 

7.addPokemon을 사용하지 않는 PokemonList.jax에서 기존에 사용하던 AddPokemon의 흔적을 지워버린다!

 

걱정했는데 정말 다행히도 오류없이 잘됨!

강의를 보고도 헷갈리는 부분은 공식문서를 참고했다

https://ko.legacy.reactjs.org/docs/context.html#consuming-multiple-contexts

Context – React

공식맞나? 암튼 정말 잘 정리되어있음

 

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

한줄한줄 쓸때마다 잘 되던게 안될까봐 조마조마하다

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

useContext

provider로 감싸주기

능숙하게 다루기엔 아직 멀었지만 오늘은 어쨌든 성공적으로 리팩토링 한 사실에 의의를 두고싶다

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지