(react) JSON array 를 setState array 로 관리하여 display 하기

• https://dev.to/shareef/how-to-work-with-arrays-in-reactjs-usestate-4cmi
• API 호출을 통해 리턴된 json array 를 setState 로 관리(추가)하고, state 정보를 table 로 display 해보자.
• API 호출에 대한 응답값은 다음과 같다.

[
    {
        "associatedTokenAddress": "AgzKHLLVUSPQerWnGx7EUDEoU65WywTbRk8jgs57uCK2",
        "mint": "H6iaaQxQSWn8W68jDkVxtP9KuCZwK4a2bZtcaMjDfLpr"
    },
    {
        "associatedTokenAddress": "36k1UoepVwUymusrphAVzYNe5NBKbUzy1u1TrQFk6Y4E",
        "mint": "8Zsbefzvbyww6sbF2N4KUtwWFwgRgRVaudUahi6EJSfY"
    },
    {
        "associatedTokenAddress": "5tHPzogfe6mUGRmzBMbVtWY2tHFjbbUbjnsDm3tJBfha",
        "mint": "io85jubmyJoaA5rXQ1wzVtBnPJ9uLiKfDoJ7UL5Uajs"
    },
    {
        "associatedTokenAddress": "478ngWYmcPv2nDy26jA1pt51Gm6KdjMjye3qSmUsAC5V",
        "mint": "FQpAmEZcfPAQpt8BgRPio5P1dywjTxcLQNrvHhNNZAU7"
    }
]

• JSON array 를 리턴받아 setState 에 배열로 추가하는 코드

    const getUniqueAssets = async () => {
        const assets: JSON = await getAllNftsByAddress(uniqueWallet);
        setUniqueAssets([]);
        for (const key in assets) {
            setUniqueAssets((prevAssets) => {
                return [
                ...prevAssets,
                {
                    associatedTokenAddress: assets[key]['associatedTokenAddress'],
                    mint: assets[key]['mint'],
                },
            ]});
        }
    }

• 중요한 것은 json array 는 key (0,1,2,3,,,) 에 대해 접근하게 되고
• setState 는 그냥 배열로 지정하는 것이 아니라 함수 형식으로 기존 값을 보존해야 한다.
• 화면에 state array 를 뿌려주는 코드

<ul>
    {uniqueAssets.map((asset, index) => (
        <li key={index}>
            <span>associatedTokenAddress: {asset.associatedTokenAddress}</span>{" "}
            <span>mint: {asset.mint}</span>
        </li>
    ))}
</ul>

• map 을 사용한다.