인프런 커뮤니티 질문&답변

안녕하세요 dev.mingyo님. 리액트의 핵심원리를 날카롭게 지적해 주셨네요.

결론부터 말씀드립니다. 네, 맞습니다. 해당코드는 useEffect를 오용한 사례가 맞습니다.

불필요한 렌더링

리액트는 상태가 변하면 렌더링을 수행하는데요.

1. 사용자가 값을 입력 함 → setValue 호출 (1차 렌더링)

2. 렌더 직후 useEffect 실행 → setErrors 호출 (2차 렌더링)

한 번만 입력해도 브라우져는 매번 두 번씩 화면을 그리는데요, 서비스가 커질수록 성능 저하의 원인이 될수 있습니다.

개선 방향

errors 상태를 두었지만 실은 values를 통해 파생될수 있는 값입니다. 공식 문서에서 강조하듯, 기존 상태를 조합해서 만들 수 있는 값은 별도의 상태로 두지 않는 것이 유지보수에 훨씬 유리해요. errors를 직접 렌더링 내의 변수로 선언하는 것이 '리액트다운' 해결책입니다.

// ❌ 기존 방식: 불필요한 렌더링 발생
// const [errors, setErrors] = useState({});
// useEffect(() => { setErrors(validate(values)) }, [values]);

// ✅ 파생된 상태로 처리 (useState/useEffect 제거)
const errors = validate(values);

이렇게 작성하면 values가 바뀔 때 리액트가 렌더링을 시작하고, 최신 errors 값을 계산하여 화면에 그립니다. 코드도 훨씬 간결해지고 성능도 최적화될 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. dev.mingyo님, 반갑습니다!

useEffect를 사용할 때 주의해야 할 점은 dependencies(의존성 배열)와 부수효과의 관리입니다. useEffect 내에서 상태를 변경하는 경우, 해당 상태를 의존성 배열에 포함시켜야 올바른 동작을 보장할 수 있습니다. 상태 변경 시 의존성 배열이 변경되지 않으면 의도한 대로 useEffect가 실행되지 않을 수 있습니다.

예를 들어, 아래와 같은 useEffect는 errors 상태가 변경될 때마다 효력을 발생하게 됩니다:

useEffect(() => {
    // errors 상태가 변경될 때마다 실행될 코드
    // 예: API 호출, 로컬 저장소 업데이트 등
}, [errors]);

setErrors를 통해 상태를 변경할 때 useEffect가 올바르게 작동하지 않는다면, 의존성 배열 설정을 다시 확인하시고, setErrors가 의도대로 상태를 변경하는지 디버깅하시는 것이 좋습니다.

관련해서 React 공식 문서의 useEffect 설명도 함께 참고하시면 기본적인 사용 방법과 주의점에 대해 더 깊이 이해하실 수 있습니다.

혹시 이와 관련된 비슷한 사례나 더 구체적인 예시가 필요하시면, 추가 정보를 제공해 주시면 더 맞춤형으로 답변드릴 수 있도록 하겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.