UseEffect Ex3

 

Nextjs useEffect

 

외부 값 읽어와서 적용시(useState변경으로 인한) 갱신되어 다시 실행되는 문제를 해결할 수 있다.

 

Ex

import useSWR from 'swr'
import Axios from 'axios'
import { useEffect, useState } from 'react';


function AppDrawback() {
	let [data=[], setData] = useState(null);

	const url = "http://localhost:3001/api/forexdatas1?json=1";

	console.log("load url: " + url);

	//문제점: browser에서 작동중에 반복적 조회되는 현상.
	// setData로 state가 변경 -> 갱신 -> 또다시 setData호출 되어 순환 반복.
	Axios.get(url).then((res) => setData(res.data));

	return (
		<div >
			<p> LIST </p>
			{data?.map((e:{id:string})=> <p> {e.id} </p> )}
		</div>
	);
}
function AppImprove() {
	
	let [data=[], setData] = useState(null);

	const url = "http://localhost:3001/api/forexdatas1?json=1";
	console.log("load url: " + url);

	useEffect(()=>{
		Axios.get(url).then((res) => setData(res.data));
	}, []);
	

	return (
		<div >
			<p> LIST </p>
			{data?.map((e:{id:string})=> <p> {e.id} </p> )}
		</div>
	);
}

//export default AppDrawback;
export default AppImprove;

 

Data

'http://localhost:3001/api/forexdatas1?json=1'의 내용

[{"_id":"63bbe833efd09cc9d4c05aec","id":"testkk","memo1":"undefined"},{"_id":"63bbe83aefd09cc9d4c05aed","id":"testvv","memo1":"undefined"},{"_id":"63bbe83fefd09cc9d4c05aee","id":"test333","memo1":"undefined"}]

 

결과