리액트로 프로젝트를 여러번 했지만, 리액트가 바라는 방식으로 제대로 잘 사용하고 있는지
React 학습 부분에서 UI표현하기 주제를 다루고 있습니다.
컴포넌트 순수하게 유지하기 (순수 함수)
컴포넌트를 순수 함수로 작성하면 코드베이스가 커지더라도 예상 밖의 동작이나 예기치 않은 버그를 피할 수 있습니다.
순수 함수란?
-
자신의 일에 집중합니다. 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않습니다.
-
같은 입력, 같은 출력 동일한 입력이 주어졌다면 순수 함수는 동일한 결과를 반환해야 합니다.
예를 들어, 다음과 같은 수학 공식을 생각해보세요: y=2x. -
만약 x=2라면, 항상 y=4입니다.
-
만약 x=3이라면, 항상 y=6입니다.
리액트 컴포넌트에서 순수 함수의 중요성
리액트 컴포넌트가 순수 함수로 작성될 때 얻는 이점은 다음과 같습니다:
- 예상 가능한 결과: 동일한 props와 state가 주어지면, 컴포넌트는 항상 동일한 결과를 렌더링합니다. 이는 디버깅과 테스트를 훨씬 쉽게 만들어줍니다.
- 변경 가능성 최소화: 컴포넌트가 외부 상태를 변경하지 않기 때문에, 예상치 못한 사이드 이펙트를 줄일 수 있습니다.
리액트는 왜 순수함을 신경 쓸까요?
- 예측 가능성: 컴포넌트가 순수 함수로 작성되면, 동일한 props를 전달했을 때 항상 동일한 결과를 반환하기 때문에 예측 가능한 동작을 보장할 수 있습니다.
- 성능 최적화: 컴포넌트가 순수 함수로 작성되면, props가 변경되지 않은 경우 렌더링을 건너뛸 수 있으므로 성능을 최적화할 수 있습니다.
테스트 용이성: 순수 함수는 입력에 따라 항상 동일한 결과를 반환하기 때문에 테스트하기 쉽습니다. - 유지보수성: 부작용이 없는 순수 함수는 코드의 의도를 명확하게 표현할 수 있으므로 유지보수성이 높아집니다.
컴포넌트가 순수 함수로 작성되면, 상태 변화를 추적하기 쉽고 코드의 복잡성을 줄일 수 있습니다. 따라서 리액트에서는 순수 함수를 기반으로 하는 함수형 컴포넌트를 권장하고 있습니다.
리액트에서 Side Effect란?
Side Effect란 함수 내에서 동일한 입력에 대해 같은 결과를 보장할 수 없도록 하는 것, 또는 함수 실행 과정에서 외부의 값을 변경하는 것을 의미합니다.
리액트에서 Side Effect 예시:
- 서버에서 API 호출
- 함수 외부 값 변경
- 쿠키 및 브라우저 스토리지 이용
- 브라우저 직접 변경 (document, window)
- 시간 관련 함수 사용 (setTimeout, setInterval)
위와 같은 Side Effect는 개발 시 반드시 필요하지만 일관되지 않은 결과를 반환하고 예측을 어렵게 하기 때문에 적재적소에 배치하고 복잡도와 볼륨을 줄여 최대한 예측 가능한 코드를 작성해야 합니다.
Side Effect 관리는 어디서?
보통 이벤트 핸들러에서 관리하는 것이 좋습니다. 이벤트 핸들러는 이미 컴포넌트가 모두 렌더링된 후에 동작하므로 렌더링 중 위험을 줄일 수 있습니다. 만약 렌더링 과정 중 리액트 로직에 의도치 않은 변경이 생긴다면 성능 문제와 오류가 발생할 수 있습니다. 하지만 이벤트 핸들러로만 해결할 수 없는 상황도 있습니다. 이때 useEffect를 이용할 수 있습니다. useEffect도 렌더링 후 동작하기 때문입니다. 그러나 이 접근 방식이 마지막 수단이 되어야 합니다.
마무리
꼭 필요한 Side Effect는 적절히 사용하되, useEffect로 처리할 필요 없는 로직은 최대한 지양하는 방향으로 코드를 작성할 수 있도록!
