목차
순수함수와 부수 효과(Side Effects)
함수는 일반적으로 입력을 받아 출력을 만들어내는 과정을 담당한다. 하지만 때로는 함수가 외부 상태에 의존하거나 외부를 변경하기도 한다. 이것을 부수 효과(Side Effects)라고 한다.
부수 효과의 예시로는 다음과 같은 것을 들 수 있다.
- 외부 변수 변경: 함수 밖의 변수 값을 수정
- API 요청: 서버에서 데이터를 가져오거나 전송
- DOM 조작: 웹 페이지의 특정 요소 변경
부수 효과과 있는 함수는 예측하기 어렵기 때문에 버그 발생 가능성이 높다. 따라서 부수 효과가 없는 코드를 작성하고, 동일 입력에 항상 동일 출력을 반환하는 것이 견고한 프로그램을 만드는 두 가지 중요한 규칙이다. 이러한 규칙을 지키면 함수는 순수 함수(Pure Function)가 되며, 코드가 더 예측 가능하고 재사용하기 쉬워지며 테스트도 간편해진다.
컴포넌트 부수 효과 관리
리액트 컴포넌트는 원칙적으로 순수 함수처럼 작동해야 한다. 즉, 컴포넌트는 자신의 props와 state를 기반으로 UI를 렌더링하고, 외부 상태를 직접 변경해서는 안 된다.
왜 컴포넌트는 순수해야 할까? 리액트는 성능 최적화를 위해 컴포넌트를 여러 번 호출할 수 있다. 만약 컴포넌트가 순수하지 않으면, 예측 불가능한 결과나 버그가 발생할 수 있다. 따라서 컴포넌트 렌더리오가 관련 없는 부수 효과들은 별도로 관리해야 한다.
리액트에서는 컴포넌트의 부수 효과를 안전하게 관리하기 위해 useEffect 훅을 제공한다. useEffect는 컴포넌트가 렌더링된 이후에 특정 작업을 수행하도록 예약하는 역할을 한다.
- 실행 시점 제어: useEffect는 컴포넌트를 렌더링할 때마다 실행되지만, 두 번째 인자로 종속성 배열을 설정하여 특정 값(state, props)이 변경될 때만 실행되도록 제어할 수 있다. 빈 배열([])을 전달하면 컴포넌트가 처음 마운트될 때 한 번만 실행된다.
- 클린업(Cleanup) 함수: useEffect는 정리 함수를 반환할 수 있다. 이 함수는 컴포넌트가 언마운트되거나 이벤트가 다시 실행되기 직전에 호출되어 메모리 누수나 불필요한 리소스 사용을 방지한다.
단, useEffect를 사용할 때 주의해야 하는 점이 있다.
- 객체 타입의 종속성: 종속성 배열에 객체를 넣을 때는 주의해야 한다. 객체는 값이 같아도 메모리상의 참조(reference)가 다르면 변경된 것으로 간주되어 이펙트가 불필요하게 반복 실행될 수 있다. 이를 방지하려면 useState 등을 활용해 객체 참조를 일정하게 유지해야 한다.
- 관심사 분리: 여러 부수 효과가 있다면 하나의 useEffect에 모두 넣기보다, 각각의 관심사에 따라 여러 개의 useEffect를 사용하는 것이 코드를 더 깔끔하게 만든다.
오늘 하루를 돌아보며
리액트를 잘 활용하려면 순수 함수를 잘 만들어야겠다. 예측할 수 있는 코드가 좋은 코드라는 것을 배웠다. 함수 이름만 봐도 어떤 기능을 하는지 알 수 있고, 한 번에 한 가지 기능만 갖고 있는 함수를 만들어야 한다. 부수 효과가 없는 코드를 작성하고, 동일하게 입력할 때마다 항상 동일하게 출력하도록 구성해야 한다. 그러면 함수가 예측 가능해지고 버그가 줄어든다. 순수 함수를 많이 사용하면 프로그램이 더 견고해진다. 작은 단위부터 예측 가능하게 만들어 나가면, 결과적으로 전체 앱이 안정적이고 유지보수하기 쉬워질 것이다.
리액트가 순수함을 신경쓰는 데에는 다 이유가 있을 것이다. 컴포넌트를 순수하게 유지하는 것이 리액트가 의도한 대로 코드를 작성하는 것이고, 그만큼 리액트를 충분히 활용하는 것이다. 리액트를 사용하면서 자바스크립트처럼 작성한다면 리액트를 사용하는 의미를 다시 고민해 봐야 하지 않을까? 리액트가 제공하는 것들을 충분히 사용하기 위해서는 리액트가 어떻게 작동하는지, 어떤 의도로 만들어졌는지 알아야겠다.
