React로 웹페이지를 작성하던 도중,
조건을 할당하여 useEffect의 동작이상을 개선하였습니다.
- 상황 -
서버에서 fetch해 온 데이터를 state에 담고,
해당 state를 이용하여 페이지를 렌더링 합니다.
프론트엔트 소스코드는 하기와 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import { Fragment, useEffect, useState } from 'react';
function Test() {
const [hi, setHi] = useState([]);
// 본 페이지가 렌더링 되면 서버로부터 데이터를 fetch하고 'hi' state에 추가함
fetch('http://localhost:8000/fetch')
.then((res) => res.json())
.then((data) => {
setHi((hi) => [...hi, data.message]);
});
return (
<Fragment>
<div style={{ marginLeft: 30, marginTop: 30 }}>
{/* 'hi'state의 값으로 li를 생성함(렌더링) */}
{hi.map((fetchedData, i) => (
<li key={i}>{fetchedData}</li>
))}
</div>
</Fragment>
);
}
export default Test;
|
cs |
백엔드 소스코드는 하기와 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import express from 'express';
import http from 'http';
import cors from 'cors';
const app = express();
const server = http.createServer(app);
app.use(express.json());
app.use(cors({ origin: '*' }));
server.listen(8000, () => {
console.log('server is listening on port 8000!');
});
///fetch uri로 get요청이 있을 경우, 하기 response 객체를 보냄
app.get('/fetch', (req, res) => {
res.json({ message: '안녕하세요?' });
});
|
cs |
- 문제점 -
데이터가 필요한 것은 한 번 뿐인데,
계속해서 fetch가 발생하여 페이지가 무한렌더링에 빠집니다.
- 원인 -
해당 문제의 원인을 도식화 하면 하기와 같습니다.
- 해결 -
fetch부분을 useEffect에 삽입하여,
페이지가 렌더링 될 때 1회만 렌더링 되도록 수정하였습니다.
(useEffect의 끝부분에 빈배열 []삽입)
'웹개발자공부 > Failure note' 카테고리의 다른 글
| 조건 할당을 통한 useEffect 동작이상 개선 (0) | 2022.12.21 |
|---|---|
| Nullish coalescing operator (??)를 활용 한 서버 동작이상 개선 (0) | 2022.12.21 |
| 쿼리문 작성 시, 조건 불충분 개선 및 자료 결합 수정 건 (0) | 2022.12.11 |
| Cannot set headers after they are sent to the client 오류 해결하기 (0) | 2022.10.23 |
| 반복문 작성 시 증감문 오기입으로 인한 무한로딩 개선 (0) | 2022.09.28 |