목차
엄격 모드(Strict Mode)로 문제 검토
엄격 모드(Strict Mode)는 개발 중에 잠재적인 문제를 찾기 위한 리액트의 특별한 도구다. 이 모드는 실제 배포 환경에는 영향을 주지 않고, 오직 개발 환경에서만 활성화된다.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
const root = createRoot(document.getElementById('root'))
root.render(
<StrictMode>
<App />
</StrictMode>
)
엄격 모드는 특정 작업을 두 번 반복 실행하여 잠재적인 버그를 노출한다.
- 컴포넌트 마운트: 컴포넌트가 처음 렌더링될 때 마운트 → 언마운트 → 다시 마운트 과정을 빠르게 반복한다. 이를 통해 useEffect 훅에서 정리(cleanup) 함수를 제대로 작성했는지 쉽게 확인할 수 있다.
- 순수하지 않은 함수 감지: 컴포넌트나 함수가 전역 변수와 같은 외부 상태를 변경했을 때 두 번의 실행으로 값이 두 번 증가하는 등의 부작용을 즉시 발견할 수 있다.
엄격 모드를 사용하면 숨겨진 버그를 미리 찾아내 코드 품질을 높이는데 큰 도움이 된다.
데이터 가져오기(Data Fetching)
서버에서 데이터를 가져오는 것은 부수 효과(Side Effect)에 해당하기 때문에 리액트 컴포넌트의 순수성을 해치지 않도록 useEffect 훅 안에서 처리해야 한다.
데이터를 가져오는 과정은 다음과 같은 세 가지 상태를 함께 관리하는 것이 좋다.
- 로딩(Loading): 데이터를 요청하는 동안 "로딩 중..."과 같은 메시지를 표시한다.
- 에러(Error): 요청이 실패했을 때 사용자에게 에러 메시지를 보여준다.
- 데이터(Data): 요청이 성공했을 때 서버에서 받은 데이터를 저장하고 화면에 표시한다.
이러한 상태들을 useState 훅으로 관리하면, 각 상태에 따라 조건부로 다른 UI를 보여줄 수 있다.
import { useState, useEffect } from 'react'
export default function App() {
// 로딩, 에러, 데이터 상태 설정
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)
const [data, setData] = useState(null)
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then(console.log)
}, [])
return (
<section className="app" lang="en">
<h1>User</h1>
{/* 사용자 목록 */}
</section>
)
}
엄격 모드에서의 데이터 페칭
엄격 모드에서는 컴포넌트가 두 번 마운트되기 때문에 네트워크 요청도 두 번 발생할 수 있다. 이를 해결하려면 useEffect 훅의 클린업(cleanup) 함수에서 이전에 발생한 중복 요청을 취소하는 로직을 추가해야 한다. AbortController를 사용하면 중복된 네트워크 요청을 효과적으로 취소할 수 있다.
비동기 함수와 axios 활용
useEffect 내부에서 비동기 작업을 처리할 때는 즉시 실행 함수 표현식(IIFE)이나 별도의 비동기 함수를 선언하여 사용하는 것이 일반적이다. 또한, fetch API 대신 axios와 같은 라이브러리를 사용하면 데이터 요청과 응답 처리, 에러 핸들링을 더 간편하게 구현할 수 있다. axios는 요청 취소를 위한 자체적인 기능도 제공한다.
오늘 하루를 돌아보며
강사님이 엄격 모드를 왜 사용해야 하는지 열심히 설득하셨다. 많은 사람이 엄격 모드를 사용하면 작업을 두 번씩 실행하는 것이 거슬리거나 데이터를 가져올 때 이전 요청 결과를 무시하도록 처리하는 것이 귀찮아서 자꾸 지우는데, 리액트에서도 그렇고 강사님도 그렇고 엄격 모드를 사용하는 것을 추천한다고 했다.
위에서도 설명했듯이 엄격 모드를 활성화하면 숨겨진 버그(부수 효과 정리 누락, 불순한 함수 등)를 쉽게 찾을 수 있다. 엄격 모드는 리액트 앱 개발 중 버그를 빠르게 찾아내기 위한 안전장치다. 팀 단위로 개발할 때도 엄격 모드를 켜두면 코드 품질 관리에 큰 도움이 된다. 그래서 파이널 프로젝트 때 엄격 모드를 활성화하기를 많이 강조하셨다.
분명히 강조하신 이유가 있을 것으로 생각한다. 그리고 아무리 귀찮아도 버그를 일일이 찾아내는 것보다, 심지어 모르고 지나치는 것보다 버그가 발생하면 바로 알 수 있는 것이 더 좋다고 생각한다. 엄격 모드에서 발견된 경고나 버그는 반드시 수정하는 습관을 가져야겠다. 프로덕션 환경에선 아무런 영향 없으니, 개발할 때는 꼭 활성화 해야지!
