버튼 안에 버튼을 넣으니 console에 오류가 발생했다. 오류가 발생한 코드는 다음과 같다.

import DetailBoard from "./DetailBoard.jsx";
import {useNavigate} from "react-router-dom";

function PokemonCard({ pokemon }) {
    // id를 000으로 바꿔줌
    const id = String(pokemon.id).padStart(3, '0');
    const navigate = useNavigate();

    function onClickHandle() {

        navigate(`/detail/${pokemon.id}`);
    }
    
    return (
        <div>
            <button onClick={onClickHandle}>
                <img src={pokemon.img_url} alt={pokemon.korean_name}></img>
                <h3>{pokemon.korean_name}</h3>
                <p>No. {id}</p>
                <button>추가</button>
            </button>
        </div>
    )
}

export default PokemonCard;

button 태그 안에 button을 넣었다.

찾아보니 HTML에서는 <button> 안에 다른 <button>을 금지한다고 한다. React hydration 오류를 일으킨다고 한다.

React Hydration

• 서버에서 미리 렌더링한 HTML을 클라이언트 React 앱이 접수하여 상호작용 가능하게 만드는 과정
• Ex) Next.js에서는 서버가 먼저 HTML을 생성해서 클라이언트에 전달. 클라이언트의 React가 이 HTML을 분석하고 이벤트 핸들러를 붙임. 이 과정을 hydration.
• Hydration 오류는 클라이언트가 서버에서 받은 HTML을 React 컴포넌트와 일치하지 않을 때 발생
• 서버와 클라이언트의 렌더링 결과가 다를 때 발생하는 동기화 실패 오류
• JSX 구조 지키기, 조건부 렌더링 일관성 유지, 브라우저 전용 객체는 클라이언트에서만

내부 button을 span으로 고치니 오류는 해결되었다.

detail 페이지에 포켓몬 데이터를 전달했는데 오류가 뜬다.

function DetailBoard({ pokemon }) {
    
    console.log(pokemon)

    return (
        <div>
            <img src={pokemon.img_url} alt={pokemon.korean_name}></img>
            <h3>{pokemon.korean_name}</h3>
            <p>{pokemon.types}</p>
            <p>{pokemon.description}</p>
            <button>뒤로 가기</button>
        </div>
    )
}

export default DetailBoard;

console로 pokemon을 찍으면 데이터가 나오는데 return 문에서 pokemon 데이터를 받지 못한다. 정확히는 undefined로 찍힌다.

원인을 찾아보니 React 컴포넌트는 여러 번 렌더링되기 때문에, 처음 렌더링 때는 undefined였고, 나중에 props가 채워졌을 수 있다.

그래서 if 문으로 pokemon 데이터가 없을 때는 로딩 중이라고 설정했는데 값이 계속 불러오지 않았다.

아마 부모 컴포넌트에서 문제가 있다고 판단하고 부모 컴포넌트를 봤다.