순수함수란?
입력값에 대해 언제나 동일한 출력값을 반환하는 함수. 함수 외부의 상태를 변경하지 않으며, 외부 상태에 의존 하지도 않는다. 즉, 사이드 이펙트가 없는 함수다. 순수함수는 불변성을 유지하면서 입력값을 가공해 결과를 반환하므로 입력값이 같다면 항상 같은 결과를 보장한다. 이런 특성 때문에 예측이 가능하므로 안정적인 코드를 작성할 수 있다.
function sum(a, b) {
return a + b;
}
const result1 = sum(2, 3); // 5
const result2 = sum(2, 3); // 5result1과 result2가 2, 3이라는 동일한 인자를 받았기 때문에 언제나 5를 반환한다.
불변성(Immutability)
객체나 배열 등의 데이터 구조를 생성한 후 그 데이터 구조를 변경할 수 없는 것. 자바스크립트에서는 기본 데이터 타입(primitive type)인 숫자(number), 문자열(string), 불리언(boolean), null, undefined와 같은 값들은 불변값(immutable value)으로 취급한다. 이들은 생성된 이후에 변경될 수 없다.
하지만 객체(Object)나 배열(Array) 등의 참조 데이터 타입(reference type)은 불변값으로 취급하지 않는다. 이들은 생성된 이후에도 내부의 값이 변경될 수 있다. 내부 값이 변경될 때 그것을 참조하고 있는 모든 변수나 객체의 내부 값이 함께 변경되기 때문에 예상치 못한 결과를 초래할 수 있므로 디버깅이 어려워질 수도 있다.
따라서 불변성을 유지하면 객체나 배열 등의 데이터 구조가 변경되는 것을 방지할 수 있다. 객체나 배열을 변경하려면 새로운 객체나 배열을 만들어야 한다. 이때 기존의 객체나 배열을 복사한 후 새로운 값을 추가하거나 변경한다. 이를 깊은 복사라고 한다.
사이드 이펙트란?
함수가 실행되면서 함수 외부의 상태를 변경하거나 외부와의 상호작용을 통해 발생하는 영향을 말한다. 파일 입출력, 네트워크 호출, 전역 변수 변경 등이 해당된다. 사이드 이펙트가 포함된 함수는 같은 인자를 받아도 결과값이 달라질 수 있다. 즉, 예측이 불가능하기 때문에 테스트와 디버깅이 어렵다.
let count = 0;
function increment() {
count++;
}
increment(); // count = 1
increment(); // count = 2increment() 함수를 호출할 때마다 count의 값이 변화한다.
전역 변수(Global Variable)
함수나 블록 내에서 선언되지 않은 변수. 전역 변수는 모든 코드에서 공유되며, 값을 변경하면 영향을 받는 모든 코드에서 해당 값이 변경된다. 코드의 유지보수성을 떨어뜨리고 디버깅을 어렵게 만들 수 있다. 그러므로 여러 함수나 모듈 간의 상태 공유에 사용되는 경우에도 모듈화와 의존성 주입과 같은 기술을 사용하여 전역 변수 사용을 최소화하는 것이 좋다.
의존성 주입(Dependency Injection)
객체 지향 프로그래밍에서 컴포넌트 또는 객체 간의 의존성을 더 느슨하게 만들기 위한 디자인 패턴.
의존성(Dependency)이란 하나의 객체가 다른 객체를 사용할 때 발생한다. 예를 들어 객체 A가 객체 B를 사용한다면 A는 B에 의존성이 있다고 할 수 있다. 이렇게 객체 간에 의존성이 발생하는 경우, 의존성을 느슨하게 만들어주면 객체 간의 결합도를 낮출 수 있다.
의존성 주입은 객체를 생성하고 조립하는 부분을 분리함으로써 느슨한 결합을 만듭니다. 이를 테면 객체 A가 객체 B에 의존하더라도 A가 B를 직접 생성하거나 참조하지 않고 외부에서 생성된 B 객체를 주입받아 사용하는 식이다. 이렇게 하면 A와 B의 결합도를 낮출 수 있습니다.
React에서는 컴포넌트 간의 의존성을 주입하기 위해 Props와 Context를 사용한다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용되며, Context는 컴포넌트 트리 상위에서 하위로 데이터를 전달할 때 사용된다. 이를 통해 컴포넌트 간의 결합도를 낮출 수 있다.
