240820

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

하다보니 뭐가 뭐의 자식컴포넌트인지 자꾸 헷갈려서 그림으로 정리

어제 오류나던 Detail페이지의 뒤로가기 버튼은

Dtail페이지에 작성한

const navigate = useNavigate;

 

이거 때문이었음

훅을 함수처럼 사용하고 있다는 말이 이해가 안갔는데,

useNavigate 뒤에 () 괄호가 빠져있던것

const navigate = useNavigate();

 

이렇게 수정하니 정상적으로 뒤로가짐

 

styled-component를 이용해 버튼의 색도 수정해줌 css안에서 props를 받아와 값에 따라 색을 변경해주는 방식으로.

const Button = styled.button`
  background-color: ${(props) => (props.isAdd ? "green" : "red")};
  `

 

css에는 이렇게 작성. isAdd가 true일 때는 초록색, false일 때는 빨간색으로 주겠다 한 후,

//추가 버튼
<Button isAdd={true}/>

//삭제 버튼
<Button isAdd={false}/>

 

각각의 버튼들에 true값과 false값을 주니 

 

삭제는 빨간색, 추가는 초록색으로 표시됨

 

이제 수정해야 할 부분은 

1. 대쉬보드의 카드목록

<li key={pokemon.id}>{pokemon.korean_name}</li>

 

이렇게 li에 단순히 선택된 포켓몬 이름만 들어가게 되어있는데, 이것을 Card 컴포넌트에서 카드 그대로 끌고오는 코드가 필요할것같다. 그리고 삭제버튼..예시사이트에는 리스트안의 카드엔 저렇게 삭제로 변경되지않고, 추가인 상태로 남아서 다시 누르면 추가할 수 없다는 alert창이 떠야하는데 아래 리스트에서 삭제버튼으로 바뀌어버림. 

 

2. 디테일페이지

여전히 아무정보도 뜨지않음.. 뒤로가기는 제대로 동작함

 

이 정보는 url에서 id값을 가져와서 해당 id와 일치하는 정보를 mock파일에서 찾아 화면에 뿌려줘야함

나는 이걸 

const pokemon = MOCK_DATA.some((p) => p.id === MOCK_DATA.id);

 

이렇게. 받아오지도 않은 id를 넣고ㅋㅋ mock데이터서에 일치하는 id를 찾은것..

아무튼 이 url 뒤에 있는 id값은 각각의 포켓몬이 가지고 있는 id값인데, 이것을 가져와야 했다

그리고 난 이걸 저번 팀플때 겪었었음!!

https://playhong.tistory.com/15

240802

"쿼리스트링기법"

이때는 

let parameters = new URL(location.href).searchParams;
let Id = parameters.get("id");

 

이런 코드를 사용했었는데 (내가 넣었던건 아니지만) 

검색해서 다른 코드를 넣어보기로

https://youtu.be/EBhtT9TGtqY

영상을 참고해 

콘솔창에 console.log(location)을 찍어서 

search에 "?id=1"이 들어있는 것을 확인.

이것을 id로 가져오면 되겠다

https://sisiblog.tistory.com/253

[javascript] 자바스크립트 URLSearchParams 사용 방법

여기서부터는 이 글을 참고해

const params = new URLSearchParams(location.search);
  console.log(params);

 

먼저 이렇게 params에 search값을 넣어줌

이제 여기서 "id=" 뒤의 숫자만 빼서 pokemonId변수에 넣어줄 것

const pockemonId = params.get("id");
console.log(pockemonId);

 

 

그럼 이제 위에서 짰던 말도안되는 내 코드에 MOCK_DATA.id 대신 지금 구한 pokemonId 를 넣으면 될 것 같다

 

ㅋㅋ

 

이건 위에서 수정한 버튼색 때문인 것 같다 ..

스타일 컴포넌트: 알 수 없는 prop “isAdd”가 DOM으로 전송되는 것처럼 보이며, 이는 React 콘솔 오류를 유발할 가능성이 높습니다.
알 수 없는 프로퍼티를 자동으로 필터링하려면 `<스타일시트 관리자 shouldForwardProp={...}>`를 통해 해당 동작을 선택하거나(`@emotion/is-prop-valid` 같은 API 연결) 일시적인 프로퍼티(자동 필터링을 위해 `$` 접두사 사용) 사용을 고려할 수 있습니다.

 

잘 모르겠으니 일시적인 프로퍼티 사용으로

 

background-color: ${(props) => (props.$isAdd ? "green" : "red")};

//추가
<Button $isAdd={true}>
//삭제
<Button $isAdd={false}>

 

isAdd앞에 '$' 달러표시를 접두사로 사용하니 같은 오류는 더 이상 나지 않음

 

그래도 계속 화면에 정보가 표시되지 않았는데, 이는 params.get("id")로 가져온 값이 숫자값이 아니어서 그런것

const pokemonId = Number(params.get("id"));

 

pokemonId로 가져오면서 Number()로 형변환 시켜줌

 

정상적으로 표시됨 

 

가운데에 표시되도록 css수정까지 끝

 

이제 Dashboard에 카드도 추가해주기

예제 사이트를 보면

 

이상해씨를 추가 했을 때, dashboard에 있던 div가 추가버튼만 삭제로 바뀌어 아래 리스트에 있는 div로 바뀜

<li key={pokemon.id}>{pokemon.korean_name}</li>

 

여기에 {pokemon.korean_name}을 넣는 대신에 li태그를 PokemonCard.jsx파일에서 만들었던 Card로 바꿔주면 될 것 같다. 먼저 Dashboard.jsx에 사용할 카드를 import 해준다

import PokemonCard from "./PokemonCard";

 

그리고 PokemonList.jsx에서 props와 함께 카드를 싹 긁어온다

<PokemonCard
                key={pokemon.id}
                pokemon={pokemon}
                onAdd={onAddPokemon}
                onRemove={onRemovePokemon}
                isSelected={isSelected} // 현재 포켓몬이 선택된 상태인지 확인하여 전달
                navigate={navigate} // 포켓몬 상세페이지로 이동하기 위해 navigate 함수 전달
              />

 

그럼이제 이런 오류가 뜬다

 

Dashboard에는 선택된 카드만 보여지기 때문에 prop가 항상 true여야 하므로 isSelected를 true로 설정하면

 

이제 표시된다

다만 예제 페이지처럼 이미 존재하는 6개의 div태그를 선택한 카드div로 변경하는 것이 아니라 단순히 추가하는 것이어서 어떻게 바꿔야할지 고민해보자

내일부터는 아래 리스트에서는 추가가 삭제로 바뀌지 않게 하고, 이미 있는 카드의 추가버튼을 누르면 이미 추가된 카드라는 경고가 뜨도록 수정 + Context API로 리팩토링하기 하면 될 것 같다

---

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

에러 뜰때마다 하나하나 찾아보면서 수정해나가는게 힘들기도 하고 뿌듯하기도 하고

---

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

 

"쿼리스트링기법"

디테일 페이지를 연결하면서 확실하게 알아간다

 

위에는 안 적었지만 css 추가하면서 구글링하다 알게 된 styled-component 사용시 hover했을 때 css 추가하는 방법

const Button = styled.button`
	color:black;
    &:hover{
    	color:red;
    }
`

 

백틱 안에 `&:hover{}` 추가하고 중괄호 안에 변경할 css를 넣으면 됨

---

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