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