함수형 프로그래밍?

setState를 사용하는 방식에 기본적으로 사용하는 방식 외에
함수형 업데이트 방식이 있다.

// 학습 입문시기에 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState((currentNum)=>{ return currentNum + 1 });

어떤 차이가 있을까?

<button onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번째 줄
          setNumber(number + 1); // 세번째 줄
        }}
> 버튼 </button>

일반 업데이트 방식-> 버튼을 클릭했을 때 number가 1씩 증가
명령을 하나로 모아 최종적으로 한번만 실행시키기 때문. 배치(batch)로 처리한다.

<button onClick={() => {
          setNumber((prevState) => prevState + 1);
          setNumber((prevState) => prevState + 1);
          setNumber((prevState) => prevState + 1);
        }}
> 버튼 </button>

함수형 업데이트 방식-> number가 3씩 증가
순차적으로 각각 1번씩 실행시킨다.

함수형 업데이트를 하는 이유

비동기적 특성으로 인해 업데이트 시 업데이트 하려는 값이 현재의 state값을 가져오는지 정확하게 알 수 없다.
함수형 업데이트를 사용하면 이런 불확실성을 줄일 수 있다.

함수형 프로그래밍의 장단점

• 장점
  높은 수준의 추상화를 제공한다.(컴퓨터 과학에서 추상화는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것)
  함수 단위의 코드 재사용이 수월하다.
  불변성을 지향하기 때문에 프로그램의 동작을 예측하기 쉬워진다.

• 단점
  순수함수를 구현하기 위해서는 코드의 가독성이 좋지 않을 수 있다.
  함수형 프로그래밍에서는 반복이 for문이 아닌 재귀를 통해 이루어지는데 (deep copy), 재귀적 코드 스타일은 무한 루프에 빠질 수 있다.
  순수함수를 사용하는 것은 쉬울 수 있지만 조합하는 것은 쉽지 않다

순수 함수

Memory or I/O관점에서 Side-effect가 없는 함수.
함수의 실행이 외부에 영향을 끼치지 않는 함수.
함수 자체가 독립적이고 Side-Effect가 없기 때문에 스레드에 안전성을 보장받는다.

참고 글
React, 함수형 업데이트 하는 이유
함수형 프로그래밍(Functional Programming)이란?