[React] 함수형 업데이트 (feat. 순수함수 vs 비순수함수)

순수 함수 : 외부환경에 의존하거나 변경하지 않는 함수

비순수 함수 : 외부 환경에 의존 또는 외부 환경을 변경시키는 함수

 

같은 내용을 행하더라도, 이렇게 보면 다르다.

let a = 1;

// 순수 함수
const sum (num) {
    return num + 5;
}
console.log(sum(a));   // 6

// 비순수 함수
const sumCopy(){
    return a + 5;     // 변수 a에 의존적이다.
}
console.log(sumCopy());   // 6  

 

 

같은 행위가 일어나도 외부 환경에 대한 의존성을 낮추기 위해 순수함수와 같이 외부 환경에 의존적이지 않게 짜기 위해 함수형 업데이트를 사용한다. setState는 비동기로 동작하기에 setState 라인에 도착했을 때의 인자 값과 실제 함수가 실행되는 시점의 값이 다를 수 있다. 따라서 함수형 업데이트를 통해 실제 setState가 일어날 때 인자를 갖고와 sync를 맞춰야하느 ㄴ것이다.

// 비순수 함수형
const handleToggleModal = (e) => {
      setIsDone(!isDone);   
}

// 순수 함수형
const handleToggleModal = (e) => {
      setIsDone((isDone) =>  !isDone);   
}