순수함수란?

순수함수 조건

• 동일한 인자가 들어갈 경우 항상 같은 값이 나와야 한다.

• 부수적인 효과가 일어나면 안된다.
• 부수효과란 외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것

• return 값으로만 소통한다.

예제

function add(a, b) {
    return a + b;
}

console.log(add(10, 5));
console.log(add(10, 5));
console.log(add(10, 5));

let c = 10;
function add2(a, b) {
  return a + b + c;
}

console.log(add2(5,5)) // 20

c = 15
console.log(add2(5,5)) //25

var c = 20;
function add3(a,b){
    c = b; // 외부상태에 영향을 미치네? = 부수효과
    return a + b;
}
console.log('c : ',c);
console.log(add3(20,30));
console.log('c : ',c);

var obj1 = {val : 10};
function add4(obj, b){
    obj.val += b;
}

var obj1 = {val : 10};
function add5(obj, b){
    return { val: obj.val + b }// obj의 val만 참조만 할 뿐 변경없음.
}
console.log(obj1.val);//변경 전 10
var obj2 = add5(obj1,5);
console.log(obj1.val);//변경 후 10
console.log(obj2.val);//15

컴포넌트를 순수하게 유지하기

순수: 공식과 같은 컴포넌트

• 그것은 자신의 역할만 수행합니다. 호출되기 전에 존재했던 객체나 변수는 변경하지 않습니다.

• 동일한 입력, 동일한 출력. 동일한 입력이 주어지면 순수 함수는 항상 동일한 결과를 반환해야 합니다.

function double(number) {
  return 2 * number;
}

function Recipe({ drinkers }) {
  return (
    <ol>    
      <li>Boil {drinkers} cups of water.</li>
      <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li>
      <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <h1>Spiced Chai Recipe</h1>
      <h2>For two</h2>
      <Recipe drinkers={2} />
      <h2>For a gathering</h2>
      <Recipe drinkers={4} />
    </section>
  );
}

부작용(side effects): 의도하지 않은 결과

let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );

Local mutation: 컴포넌트의 작은 비밀

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaGathering() {
  let cups = [];
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />);
  }
  return cups;
}

부작용(side effects)을 일으킬 수 있는 곳

복습 및 마무리!

• 컴포넌트는 순수해야 합니다. 즉, 다음을 의미합니다:
• 그것은 자신의 역할만 수행합니다. 호출되기 전에 존재했던 객체나 변수는 변경하지 않습니다.
• 동일한 입력, 동일한 출력. 동일한 입력이 주어지면 순수 함수는 항상 동일한 결과를 반환해야 합니다.

• 렌더링은 언제든지 발생할 수 있으므로 컴포넌트는 서로의 렌더링 순서에 의존해서는 안 됩니다.

• 컴포넌트가 렌더링에 사용하는 입력을 변경해서는 안 됩니다. 여기에는 props, state 및 context가 포함됩니다. 화면을 업데이트하려면 기존 개체를 변경하는 대신 state를 "설정(set)"하십시오.

• 반환하는 JSX에서 컴포넌트의 논리를 표현하도록 노력하십시오. "변경"이 필요한 경우 일반적으로 이벤트 핸들러에서 변경하는 것이 좋습니다. 최후의 수단으로 useEffect를 사용할 수 있습니다.

• 순수 함수를 작성하려면 약간의 연습이 필요하지만 React 패러다임의 힘을 잠금 해제합니다.

References

Keeping Components Pure – React

The library for web and native user interfaces

https://react.dev/learn/keeping-components-pure

순수 함수란? (함수형 프로그래밍의 뿌리, 함수의 부수효과를 없앤다)

함수형 프로그래밍 함수형 프로그래밍 : 부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임* 부수 효과 = 외부의 상태를 변경하는 것 또는 함수로 들어온 인자의 상태를 직접 변경하는 것* 순수 함수 = 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 + 외부의 상태를 변경하지 않는 함수순수 함수와 순수함수가 아닌것 1234function add(a,b){ return a + b;}console.log( add(10,5) ); add는 순수함수다.언제, 어디서 실행해도 add(10,5)는 항상 15를 리턴하고 외부 상태를 변경하지 않았기 때문 123456789var c = 10;function add2(a,b){ return a +..

https://jeong-pro.tistory.com/23