REACT 상태관리

내가 하고 싶었던 것

• GitHub 사용자 ID 를 입력받고, 검색이 완료되면, 'SearchBar'를 숨기고, 'ResultCard' 컴포넌트를 표시하도록 한다.

이를 위해 상태관리를 통해 검색 상태에 따라 조건부 렌더링을 구현해야 한다.

import { useState } from 'react';
import { getUserData,getUserRepo } from './lib/api.js';
import SearchBar from './components/SearchBar.jsx'
import { Result } from './Result.jsx'

function App() {
    
    // [useState] - loading status & data
    const [userState,setUserState] = useState({
        status:"idle",
        data:null,
        repoData:null,
    })


    // getUserData 
    const getUser = async (name) => {

        //console.log("getUser called with name:",name)
        
        // * pending 
        setUserState({ 
            ...userState, 
            status:"pending" 
        });


        try {

            // userData 
            const data = await getUserData(name);
            if(data === null) throw Error;
            
            // userRepoData 
            const repoData = await getUserRepo(name);

            // * success 
            const MAX_REPOSITORY = 10;
            setUserState({ 
                status: "resolved",
                data: data,
                repoData: (repoData.length) > MAX_REPOSITORY ? 
                    repoData.slice(-MAX_REPOSITORY): repoData,
            });
        }
        catch (e) {
            // * rejected 
            setUserState({ 
                status: "rejected", 
                data:null 
            });
            console.log(e);
        }
    }

    return (
        <>
            <SearchBar getUser={getUser}/>
            <Result userState={userState}/>
        </>
    );
}
export default App;

isSearchComplete 라는 값을 선언해서, resolved 상태인 경우에만 Result 를 반환하도록 한다.

import { useState } from 'react';
import { getUserData,getUserRepo } from './lib/api.js';
import SearchBar from './components/SearchBar.jsx'
import { Result } from './Result.jsx'

function App() {
    
    // [useState] - loading status & data
    const [userState,setUserState] = useState({
        status:"idle",
        data:null,
        repoData:null,
    })


    // getUserData 
    const getUser = async (name) => {

        //console.log("getUser called with name:",name)
        
        // * pending 
        setUserState({ 
            ...userState, 
            status:"pending" 
        });


        try {

            // userData 
            const data = await getUserData(name);
            if(data === null) throw Error;
            
            // userRepoData 
            const repoData = await getUserRepo(name);

            // * success 
            const MAX_REPOSITORY = 10;
            setUserState({ 
                status: "resolved",
                data: data,
                repoData: (repoData.length) > MAX_REPOSITORY ? 
                    repoData.slice(-MAX_REPOSITORY): repoData,
            });
        }
        catch (e) {
            // * rejected 
            setUserState({ 
                status: "rejected", 
                data:null 
            });
            console.log(e);
        }
    }

    const isSearchComplete = (userState.status === "resolved") ;

    return (
        <>
        {!isSearchComplete && <SearchBar getUser={getUser}/>}
        {isSearchComplete && userState.data && (
            <Result userState={userState}/>
        )}
        </>
    );
}
export default App;