1. Side Effect
부작용, 부수 효과라는 뜻으로 어떠한 동작을 할때 input-output 이외의 다른 값을 조작한다면, 이 함수는 Side Effect(부수효과)가 있다고 표현한다. Side Effect는 React의 함수 컴포넌트에서도 일어날 수 있다. Input이 state, props이고, output이 UI라면, 함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 할 수 있다. (ex. Data Fetching)
2. useEffect
함수 컴포넌트의 리턴 값은 UI 요소이며 state, props의 변화가 있을 때마다 함수가 실행된다.
즉, 랜더링 때마다 함수 body에 있는 로직이 실행된다.
렌더링과 무관한 로직이 렌더링 과정에서 실행되기 때문에 렌더링 자체에 영향을 줘 성능 상 악영향을 끼칠 수도 있다.
useEffect는 Side Effect를 렌더링 이후에 발생시킨다.
함수 컴포넌트는 최신 state와 props를 반영한 화면을 리턴하게 됩니다. Effect를 일으킬 타이밍은 useEffect의 두 번째 인자인 의존성 배열(Dependancy Array)를 통해 표현하게 되는데,
매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
// Side Effect
})
// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
// Side Effect
}, [value])
// Side Effect가 첫 번째 렌더링(마운트) 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
// Side Effect
}, [])
