[React] State

오늘 배울 거

• useState Hook을 이용해서 state variable을 추가하는 방법
• useState Hook이 리턴하는 pair가 무엇인지
• 왜 state는 local에서 called되는지

state 변수는 바뀌고 화면에 변화가 반영되어야 하는 값들

import { useState } from 'react';

const [index, setIndex] = useState(0); // 처음에 0으로 세팅

Pokemon Dictionary 만들기

import { useState } from 'react';

const pokemon_dictionary = [
    {
        id : crypto.randomUUID(),
        name : '이상해씨',
        img_src: 'https://i.pinimg.com/564x/63/01/f9/6301f946d97a819aa6ad245e69053947.jpg'
    },

    {
        id : crypto.randomUUID(),
        name: '파이리',
        img_src: 'https://i.pinimg.com/564x/72/a9/62/72a9621f7b704064de1e06dce1503321.jpg'
    },

    {
        id: crypto.randomUUID(),
        name: '꼬부기',
        img_src: 'https://i.pinimg.com/originals/0c/a8/80/0ca88030a6d84feffcfd44f9f083232f.gif'
    }
];


interface PokeIndex {
    num : number;
}


export function PokemonBook() {
    const [index, setIndex] = useState(0); // 처음에 0으로 세팅

    function Button(pokeindex:PokeIndex) {

        function handleClickButton() {
            return setIndex(pokeindex.num);
        }
        
        return (
            <button onClick={handleClickButton}>
                {pokemon_dictionary[pokeindex.num].name}
            </button>
        )
    }
    

    return (
        <div>
            <div id="poke-info">
                <img src={pokemon_dictionary[index].img_src} alt = {pokemon_dictionary[index].name}></img>
                <p>pokemon 이름: {pokemon_dictionary[index].name}</p>
            </div>
            <div>
                <Button num={0}/>
                <Button num={1}/>
                <Button num={2}/>
            </div>

        </div>
    );
}

결과:

기억할 것:
핸들러 함수는 트리거로 쓰이는 컴포넌트 안에 정의하기