순수함수
하나 이상의 인자를 받고, 인자를 변경하지 않고 참조하여 새로운 값을 반환하는 함수
즉, 같은 input 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수(코드 블록)이다.
-
순수함수는 외부에서 전달받은 값을 변경하면 안된다. 즉, 함수 내부에서 외부로 다른 부작용(Side effects)을 발생시키지 않아야 한다. (HTTP 요청, 데이터 저장, 쿠키 조작 등)
-
컴포넌트의 상태값은 불변 객체(Immutable Object)로 관리해야만 한다.
수정할 때에는 기존 값을 변경하는 것이 아니라, 같은 이름의 새로운 객체를 생성한다. -
이를 통해, UI 개발의 복잡도를 낮추고, 버그 발생 확률도 줄인다.
같은 입력에 대해 항상 같은 출력을 보장하니, 테스트 하기도 훨씬 수월!!!
1. 순수함수 (새로운 배열 생성)
// 매개변수를 복사한 값을 변경하는 순수함수
const addSixPure = (arr) => {
// 펼침 연산자로 새로운 배열에 6 추가
newArr = [...arr, 6];
return newArr;
};2. 순수함수가 아닌 것 (기존 배열 수정)
const num_arr = [1, 2, 3, 4, 5];
// 매개변수의 값을 직접 변경하는 불순함수
const addSixImpure = (arr) => {
// 매개변수에 직접 6 추가
arr.push(6);
return arr;
}근데.. 리액트 과정에서 갑자기 웬 순수함수?
리액트의 컴포넌트는 순수함수와 유사한 특성을 가지고 있다. 컴포넌트는 state와 props를 입력받고, React 엘리먼트를 반환한다.
이 때 컴포넌트는 부작용을 일으키지 않고, 동일한 state와 props를 입력으로 받으면 항상 동일한 엘리먼트를 반환한다.
리액트가 컴포넌트를 순수함수로 구성하려는 이유는 다음과 같다.
-
예측 가능성
컴포넌트가 순수함수로 작성되면, 동일한 props로 전달했을 때 항상 동일한 결과를 반환하기 때문에 예측 가능한 동작을 보장할 수 있다. -
성능 최적화
컴포넌트가 순수 함수로 작성되면, props가 변경되지 않은 경우 렌더링을 건너뛸 수 있으므로 성능을 최적화할 수 있다. -
테스트 용이성
순수함수는 입력에 따라 항상 동일한 결과를 반환하기 때문에 테스트하기 쉽다. -
유지보수성
부작용이 없는 순수함수는 코드의 의도를 명확하게 표현할 수 있으므로 유지보수성이 높아진다.
컴포넌트가 순수함수로 작성되면, 상태 변화를 추적하기 쉽고 코드의 복잡성을 줄일 수 있다. 따라서 리액트에서는 순수함수를 기반으로 하는 함수형 컴포넌트를 권장한다!
