React, 함수형 업데이트 하는 이유

함수형 업데이트란?

함수형 업데이트가 무엇인지는 알았다.
하지만 여기서 위의 두가지 업데이트 방식의 근본적인 차이는 무엇일까? 라는 생각을 하고 개인적인 생각을 글로 정리해 보았다.

순수함수와 비순수함수

import React,{ useState } from "react"

const App = () => {
    const [toggle,setToggle] = useState(true);
  
  // 둘의 차이를 알아보자 

    const turnToggle = () => setToggle(!toggle); // 1
    
    const turnToggle = () => setToggle(toggle => !toggle); // 2
    
    console.log(toggle)
    return <button onClick={turnToggle}>버튼</button>
}

export default App

• 1번은 비순수 함수이다.

  • side effect가 일어나고 있다.

• 2번은 순수 함수이다.

  • 함수형 업데이트로 순수 함수함수로 만들었다.

함수형 업데이트 하는 이유

• 함수형 프로그래밍 선호

  함수형 프로개래밍이란?

함수형 프로그래밍도 장단점이 있다. 간단하게 기록해 보았다.

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

  • 장점
  1. 높은 수준의 추상화를 제공한다.
     (컴퓨터 과학에서 추상화는 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것을 말한다)
  2. 함수 단위의 코드 재사용이 수월하다.
  3. 불변성을 지향하기 때문에 프로그램의 동작을 예측하기 쉬워진다
  • 단점
  1. 순수함수를 구현하기 위해서는 코드의 가독성이 좋지 않을 수 있다.
  2. 함수형 프로그래밍에서는 반복이 for문이 아닌 재귀를 통해 이루어지는데 (deep copy), 재귀적 코드 스타일은 무한 루프에 빠질 수 있다.
  3. 순수함수를 사용하는 것은 쉬울 수 있지만 조합하는 것은 쉽지 않다