[240513 TIL] 불변성 원칙과 순수 함수

오늘은 리액트를 공부하면서 그동안 왜 그렇게 사용해야 하는지 모르고
당연하게 써왔던 방법과 관련하여 그 원리에 대해 알아보았습니다.
불변성(Immutability)의 원칙과 순수함수 지향에 대한 내용입니다.

 

불변성(Immutability)의 원칙

리액트에서 상태 관리를 다룰 때 불변성(Immutability)을 유지하는 방식으로 코드를 작성해야 합니다.
불변성은 데이터가 생성된 후 수정되지 않고, 변경이 필요한 경우 새로운 데이터를 생성해서 사용하는 원칙을 의미합니다.

 

리액트에서 불변성을 유지하는 이유는 주로 성능 최적화와 관련이 있습니다.
리액트는 상태가 변경될 때 렌더링을 결정하는데, 객체나 배열 같은
참조 타입의 데이터는 내용이 변경되어도 참조 주소가 동일할 수 있습니다.

 

이 경우 리액트는 상태가 변화하지 않았다고 판단하고 불필요하게 렌더링을 건너뛸 수 있습니다.
이를 방지하기 위해 객체나 배열을 복사하여 새로운 참조를 만드는 것 입니다.

 

아래처럼, 배열 혹은 객체를 직접 수정하는 것 대신 새로운 배열, 객체를 생성해서 사용하는 것은
리액트가 참조가 변경된 것을 감지하고 적절한 렌더링을 수행하도록 합니다.

// case#1 object
const [object, setObject] = useState({ name: 'oh'}); 
// ...중략... 
const handleClick = () => { 
    // 객체의 얕은 복사 생성
    const copy = {...object}; 
    // 복사된 객체에서 프로퍼티 수정
    copy.name = 'kim'; 
    // 이를 사용하여 setState
    setObject(copy);
} 
// case#2 array
const [array, setArray] = useState([1,2,3]); 
// ...중략... 
const handleClick = () => { 
    // 배열의 얕은 복사 생성
    const copy = [...array];
    // 복사된 배열에서 값 수정 
    copy[3] = 4; 
    // 이를 사용하여 setSate
    setArray(copy);
}

 

불변성의 장점

• 예측 가능성: 데이터가 변경되지 않기 때문에 코드의 동작을 예측하기 쉬워집니다.
• 재사용성: 불변 객체는 안전하게 재사용할 수 있습니다.
• 버그 감소: 데이터가 중간에 변경되지 않기 때문에, 버그 발생 가능성이 줄어듭니다.
• 테스트 용이성: 불변 객체는 테스트가 용이하며, 테스트 환경을 구축하기 쉽습니다.

 

순수 함수

순수 함수는 입력이 같으면 항상 같은 출력을 반환하며, 외부 상태를 변경하지 않고 부작용이 없는 함수를 의미합니다.
리액트의 상태 업데이트 로직에서 순수 함수를 사용하면 예측 가능하고 테스트하기 쉬운 코드를 작성할 수 있습니다.

 

상태 업데이트 로직이 순수 함수로 작성되면, 해당 로직은 외부 상태에 의존하지 않고 오로지 입력된 인자에만 의존하여 결과를 도출합니다.

예를 들어, 위의 코드에서 상태 업데이트 함수인 setObject와 setArray는 순수 함수인 handleClick에 의해 호출됩니다.

 

이 함수들은 외부의 어떤 상태도 변경하지 않으며, 오직 주어진 상태의 복사본을 변경해서 새로운 상태를 생성하고 이를 설정합니다. 이 과정에서 부작용이 발생하지 않으므로 예측 가능하고 안정적인 동작을 보장합니다.

 

참고: 이전 til 좋은함수

 

결론

리액트에서 불변성을 유지하고 순수 함수를 사용하는 것은 컴포넌트의 상태 관리를 더 효과적이고 효율적으로 만들어,
애플리케이션의 성능을 최적화하고 예측 가능한 동작을 보장합니다.

이러한 원칙들은 리액트 뿐만 아니라 다른 프로그래밍 환경에서도 중요한 개념으로 작용한다고 합니다!