| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
Tags
- 특정 dom node만 노출시키고 싶을 때
- 리액트로 채팅 기능 구현하기
- 코드잇 스프린트 FE 1기
- dynamic metadata
- useimperativehandle 사용할때
- 회고
- http.createserver
- css module classNames
- 티스토리챌린지
- components as formulas
- 리스티웨이브
- app.listen
- 오블완
- express로 채팅 기능 구현하기
- next.js
- express react
- pure functions
- useref 타입
- React
- 스프린트 여정 마침
- inferred type error
- node.js(express) + ws(websocket) + react
- useimperativehandle 사용법
- 이미지 업로드 과정
- trigger additional callbacks
- usemutation custom hook
- CSS module 장점
- type reference cannot be named error
- 리액트 19 useref
- 프리렌더링
Archives
- Today
- Total
목록pure functions (1)
Life is connecting the dots .
React 컴포넌트를 순수 함수로 작성하는 이유
지난 프로젝트를 진행하면서 Next.js에 기본값으로 StrictMode 값이 true로 설정되어 있어서 버그를 발견하고 예방할 수 있었다. 그때의 상황을 대략 설명하자면 컴포넌트 안에서 useEffect를 실행했었고, useEffect의 콜백함수로 API를 호출하는 중이었다. 단순히 데이터를 불러오는 API라면 여러 번 호출해도 이상 없겠지만, 해당 API는 로그인 인증 관련된 부분이어서 동일한 데이터를 두 번 호출했기 때문에 에러가 발생하는 상황이었다. 결론적으로 컴포넌트가 다시 마운트 될 때, 이전 API요청을 취소하는 방법으로 해결했고, 개발환경에서만 React StrictMode가 동작하므로 배포환경에서는 문제가 안 되는 것을 확인했지만 혹시 모를 상황에 대비하여 코드를 제대로 작성할 수 있었다..
Programming/React
2024. 4. 2. 13:06