함수의 사이드 이펙트를 알기위해
함수, 순수함수, 사이드이펙트 순으로 알아야한다.

참고한 싸이트
함수란?

함수의 특징

1. mapping : 주어진 입력(parameter)을 기반으로 출력(return)에 매핑한다.
2. procedures : 어떠한 로직의 단계에서 함수가 호출될수 있다.
3. I/O : 함수는 위와같은 특성이있어 화면, Storage, 시스템로그, 네트워크, 특정로직을 위한 기능을 구현한다.

순수함수

1. 동일한 입력이 주어지면 항상 동일한 출력을 반환한다.
2. 사이드이펙트가 없다

동일한 입력이 주어지면 항상 동일한 출력을 반환한다.

순수함수는 동일한 입력이 주어지면 항상 동일한 출력을 반환해야한다.
1을 넣으면 1이나와야한다는 의미가 아닌 함수를 사용함으로써 기대되는 값이 일정하게 나와야한다는 의미이다.
때문에 함수명은 의도를 파악할수있도록 지어야한다
함수명을 통해 사용자는 기대하는 결과가 생기기때문

예를들면

const paramPlusOneHandler=(param)=>{
 	 return param+1
}

이런 함수가 있다고 생각해보자 함수명을통해 1을 넣으면 2가 나올것이라고 사용자는 기대할수있다.

사이드 이펙트가 없어야한다.

순수함수는 1번의 특징을 위해 사이드 이펙트가 없어야한다.
사이드 이펙트란 의도하지 않은 (예측할수없는)효과를 말하는데 예를들면 외부 변수를 변하게 하는것이다.
즉 함수에서 일어나는 로직은 오직 함수 내부에서만 처리가 되어야한다 함수 외부에 있는 변수를 변하게 해선 안된다.

let one=1
const paramPlusOneHandler(param)=>{
  const result=param+one
  return result
}

처음 선언한 함수와 다른점은 1이 변수에 할당되고 그 변수는 함수 외부에 선언되어있다.

위와같은 함수를 실행한다면
1을 넣으면 2가 나오고 2를 넣으면 3이 나올것이다

하지만 해당 함수가 사이드이펙트를 일으킨다면?(외부에있는 변수를 변화시킨다면)

let one=1
const paramPlusOneHandler(param)=>{
  const result=param+one
  one++// 사이드 이펙트를 일으키는 코드
  return result
}

함수를 실행할때마다 처음 1을 넣으면 2가나오지만
다시 1를 넣으면 3이나올것이다.
즉 기대하는 값이 나오지 않게된다.
이처럼 함수가 반환하는 값을 위해 사용하는 값들은 함수 내부에서만 사용해야한다.

하지만 사이드 이펙트가 부정적인 영향을 주진 않는다 분명히 잘사용한다면 더 유연하고 확장성있는 코드를 만들수도 있다.
예를 들면
사이드 이펙트를 이용해서 변수를 컨트롤하는 방법일 생각해볼수있다.

let amount=0
const amountIncreaseHandler=()=>amount++
const amountDecreaseHandler=()=>amount--
const comfirmAmount=()=>console.log(amount)

위와같이 amount를 컨트롤하는 함수를 나누어서 사용할수 있을것이다.

React에서 사이드 이펙트

위와같은 코드들을 react 개발자라면 비슷한 코드를 봤을것이다.
state를 컨트롤하는 함수들을 예로 들수있다.

const App =()=>{

  const [state,setState]=useState(0)
  const stateIncreaseHandler=()=>{
    setState(prev=>prev+1)
  }
  const stateDecreaseHandler=()=>{
    setState(prev=>prev-1)
  }

  return (
    <div>{state}</div>
  )
}

위에 작성된 핸들러들은 모두 사이드 이펙트를 발생시킨다(상위에있는 state를 변경하므로)

그렇다면 useEffect는 사이드 이펙트를 이용한다고 볼수있을까?

그렇다
react 공식문서에서도 나온내용이다
사이드 이펙트(side effects)는 useEffect에서 하는 일이지 useMemo에서 하는 일이 아닙니다.

자 react 개발자라면 다음과같은 로직을 분명히 봤을것이다.

const App =()=>{

  const [apiList,setApiList]=useState([])
  // 첫번쨰 인자는 사이드이펙트를 일으키는 함수
  useEffect(()=>{
    // 대충 api가져와서 setApiList한다는 코드
  },[])

  return (
    <div>
    {apiList.map(item=><p>{item}</p>)}
    </div>
  )
}

위와같이 유즈이펙트 안에서 api을 불러와 setState하는 코드이다.
첫번째인자로 사이드이팩트를 일으키는 함수를 넣고 두번째는 디펜던시 어레이를 떤진다.

useEffect는 첫번쨰 인자로 던진 함수를 효율적으로 사용하게 해준다.

1. 콤포넌트 렌더링일 경우 함수실행
2. 리렌더링시엔 디펜던시어레이의 값을 체크후 바뀐값이 있을 때만 첫번째 인자값인 함수를 실행
3. 콤포넌트 언마운트시 첫번째 인자값인 함수의 클로저를 실행(cleanUp)

왜 react에선 사이드 이펙트를 써야할까?

react에선 state의 변화에따라 콤포넌트를 리렌더링시킨다.

때문에 state를 변경하는 것만으로도 화면이 바뀐다 react에서 있어서 이것보다 중요한 것이 있을까?

때문에 함수의 사이드이펙트를 이용하여 state를 관리를 하는것이다.

또한 순수함수를 작성하고싶어서 콤포넌트 메소드안에 state를 선언한다면 메소드안에 만존재하는 state는 화면에선 볼수없다.