[nodejs-react]Server-Client 통신 시 무한 호출 해결

구현하고 싶은 것 :

client가 페이지에 접속했을 때, server로부터 데이터 받기 (initial data) 

 

코드:

server.js 일부 

app.use('/api', (req, res)=> 
    mdbConn.getToDoList()
    .then((rows) => {
        console.log("in server.js",rows);
        res.json({initialTodos:rows});
    })
    .catch((errMsg) => {
        console.log(errMsg);
    })
);

 

App.js 일부 (client)

function App() {
  const [state, setState] = useState({
    //username: null
    initalList: null
  });
  useEffect(() => {
    fetch('http://localhost:3002/api')
    .then(res=>res.json())
    .then(data=>setState({initalList:data.initialTodos}));
  });
  
 console.log(state.initalList);
  const _todos = state.initalList;
  return (
    <div>
      {`data from server ${_todos}`}
    </div>
    
.....

 

문제1 :

client가 server에 계속 쉬지 않고 어쩌면 무한으로.. data를 요청해서 계속 받아옴.. 

 

문제의 원인 :

useEffect()가 계속 반복되고 있던 것이었다. 

 

해결 : 

useEffect는 두 번째 인자로 넣어준 값들이 변경되었을 때 effect hook이 호출된다. 

두 번째 인자를 생략했을 때, 변경된 것으로 간주해서 무한으로 호출했던 것 같다. 

따라서 두 번째 인자로 빈 배열[]을 넣어서 컴포넌트가 마운트 되었을 때, 최초 1회만 effect hook이 호출되도록 했다. 

 

참고자료: 

boxfoxs.tistory.com/395

React - Functional Component의 장점, Hook

 

문제2:

페이지 렌더링 전에, 데이터를 서버로부터 받아야 하는데, 

useEffect()로는 componentWillMount()를 구현할 수 없었다.. 

 

해결 :

showing 이라는 state를 이용해서, useEffect()후에 의도한 페이지가 보이도록 했다.

페이지가 처음 렌더링 될 때는 로딩중 페이지 이용

codingbroker.tistory.com/74

[react] 올바른 리액트 조건부 렌더링 (if/else 구문과 ternary operator,&& 차이)

......

function App() {
	const [showing, setShowing] = useState(false);
  	const [state, setState] = useState({
		//username: null
		initalList: [{
			id: 1,
			text: '가짜값',
			done: true
		}]
  });
  	useEffect(() => {
		console.log('start useEffect');
		fetch('http://localhost:3002/api').then(res=>res.json()).then(data=>{
		setState({initalList:data.initialTodos});
		setShowing(true)
    });
  },[]); //빈 배열을 넣어 반복 실행되지 않도록.. 

	console.log("App state:",state.initalList);

  if (showing){
	return (
		<TodoProvider initalTodos={state.initalList}>
		  <GlobalStyle/>
		  <WrapAll>
				<TodoChangeDate info="left">
				</TodoChangeDate>
				<TodoTemplate>
					<TodoHead></TodoHead>
					<TodoList></TodoList>
					<TodoCreate></TodoCreate>
				</TodoTemplate>
				<TodoChangeDate info="right">
				</TodoChangeDate>
			</WrapAll>
		</TodoProvider>
	  );
  }
  else {
	  //로드중 페이지 나중에 꾸미기 
	  return(
		<div>
			페이지를 로드 중입니다 
		</div>
	  );
  }
  
......