[React] Http 연결, fetch

1. fetch 사용법

get 메서드 보내는 법

export default function Test(){
	
    const [datas, setDatas] = useState([]);
    
    // 상태값을 업데이트 하고 있기 때문에 무한 렌더링을 피하기 위해 useEffect 사용
    useEffect(()=>{
    
    	
    	fetch('http://localhost:8080/test').then((response)=>{
			return response.json(); // 받은 response객체를 json형태로 변환
		}).then((resData)=>{
			setDatas(resData.testObj); // json으로 변환한 response결과에 접근
		}) 
    },[]);
    
    
    
    return <div>
    	{datas.map((elem)=><div key={elem.id}>{elem.title}</div>)}
    </div>


}

- fetch는 Promise(값을 감싸는 객체를 반환, 여기서는 Response객체를 감싼다. )

- then을 사용하면 response 값을 받은 후 코드를 실행 할 수 있고  인자로 response를 받을 수 있다. 이 함수는 response를 받고나서 브라우저를 통해 딱 한번만 실행된다. 즉각적이지 않음.

- response.json() : Json형식의 데이터 추출 가능

 

 

asycn await 사용법, loading중임을 표시

export default function Test(){
	const [isLoading, setIsLoading] = useState(false);	
    const [datas, setDatas] = useState([]);
    
    // 상태값을 업데이트 하고 있기 때문에 무한 렌더링을 피하기 위해 useEffect 사용
    useEffect(()=>{
    
    	async function fetchTestData(){
        	setIsLoading(true); // 로딩중임을 표시
        	const response = await fetch('http://localhost:8080/test');
            const resData = await response.json();
            
            setDatas(resData.testObj); 
        	setIsLoading(false); // 로딩 끝
        }
        
        fetchTestData();
    
    },[]);
    
    
    
    return <>
    {isLoading&& <div>데이터를 가져오는 중입니다.</div>}
    {!isLoading && datas.length > 0  && <div>
    	{datas.map((elem)=><div key={elem.id}>{elem.title}</div>)}
    </div>}
    
    </>
    
    


}

- async 함수는 컴포넌트나  useEffect에 직접적인 사용 불가능.

- 따라서 useEffect 내에서 asycn 함수 정의 후 사용 해야함

 

 

export default function Test(){
	const [isLoading, setIsLoading] = useState(false);	
    const [datas, setDatas] = useState([]);
    const [error, setError] = useState();
    
    useEffect(()=>{
    
    	async function fetchTestData(){
        	setIsLoading(true); // 로딩중임을 표시
            
            try{
            	const response = await fetch('http://localhost:8080/test');
           		const resData = await response.json();
            
           		if(!response.ok){
            		throw new Error("데이터를 불러오는데에 실패했습니다")
            	}
                setDatas(resData.testObj); // error가 안날 시에 실행 되기 때문에 try 안에
            }catch(error){
            
            	setError({message:error.message ||'에러가 발생했습니다.'})
            }
        	
            
            
        	setIsLoading(false); // 에러가 나든 안나든 로딩은 끝나기 때문에 try catch 블록 밖에
        }
        
        fetchTestData();
    
    },[]);
    
    if(error){
    	return <p>{error.message}</p>
    }
    
    return <>
    {isLoading&& <div>데이터를 가져오는 중입니다.</div>}
    {!isLoading && datas.length > 0  && <div>
    	{datas.map((elem)=><div key={elem.id}>{elem.title}</div>)}
    </div>}
    
    </>
    
    


}

 

 

코드 분해 - 재사용성 위해서 

 

testHttp.js

  export async function fetchingTest(){

    const response = await fetch('http://localhost:8080/test');
    const resData = await response.json();

    if(!response.ok){
        throw new Error("데이터를 불러오는데에 실패했습니다")
    }
    
    return resData.testObj;

}

Test.jsx

export default function Test(){
	const [isLoading, setIsLoading] = useState(false);	
    const [datas, setDatas] = useState([]);
    const [error, setError] = useState();
    
    useEffect(()=>{
    
    	async function fetchTestData(){
        	setIsLoading(true); // 로딩중임을 표시
            
            try{
           		const result =  await fetchingTest();
                setDatas(resData.testObj); // error가 안날 시에 실행 되기 때문에 try 안에
            }catch(error){
            
            	setError({message:error.message ||'에러가 발생했습니다.'})
            }
        	
            
            
        	setIsLoading(false); // 에러가 나든 안나든 로딩은 끝나기 때문에 try catch 블록 밖에
        }
        
        fetchTestData();
    
    },[]);
    
    if(error){
    	return <p>{error.message}</p>
    }
    
    return <>
    {isLoading&& <div>데이터를 가져오는 중입니다.</div>}
    {!isLoading && datas.length > 0  && <div>
    	{datas.map((elem)=><div key={elem.id}>{elem.title}</div>)}
    </div>}
    
    </>
    
    


}

 

 

Post 보내는법

testHttp.js

export async function updateTestDatas(testList){
	const respone = await fetch('http://localhost:8080/testList',{
    	method: 'PUT',
        body: : json.stringify({testList})
        headers:{
        	'Content-Type':'application/json'
        }
    })
    
    const resData = await respone.json();
    
    if(!response.ok){
    	throw new Error('업데이트 도중 에러가 발생했습니다.');
        
    }
    
    return resData.message
}

-method 는 수정 하는 PUT

- body에는 백엔드가 받을 수 있는 데이터 형식으로 바꿈 

- headers 에는 데이터 타입

 

export default function Test(){
	const [isLoading, setIsLoading] = useState(false);	
    const [datas, setDatas] = useState([]);
    const [error, setError] = useState();
    const [errorUpdating, setErrorUpdating] = useState();
    
    useEffect(()=>{
    
    	async function fetchTestData(){
        	setIsLoading(true); // 로딩중임을 표시
            
            try{
           		const result =  await fetchingTest();
                setDatas(resData.testObj); // error가 안날 시에 실행 되기 때문에 try 안에
            }catch(error){
            
            	setError({message:error.message ||'에러가 발생했습니다.'})
            }
        	
            
            
        	setIsLoading(false); // 에러가 나든 안나든 로딩은 끝나기 때문에 try catch 블록 밖에
        }
        
        fetchTestData();
    
    },[]);
    
    async function updateDataHandler(){
    	try{
    		await updateTestDatas([...datas,'test']);
            
        }catch(error){
        	setDatas(datas); // 만약 error나면 다시 전 상태로 돌아감
            
        }
    
    }
    
    if(error){
    	return <p>{error.message}</p>
    }
    
    
    return <>
    {isLoading&& <div>데이터를 가져오는 중입니다.</div>}
    {!isLoading && datas.length > 0  && <div>
    	{datas.map((elem)=><div key={elem.id}>{elem.title}</div>)}
    </div>}
    <button onClick={updateDataHandler}>updateData</button>
    </>
    
    


}

- 이 코드에는 작성되지 않았지만 이경우에도 똑같이 error state값을  설정할 수 있음