[React] Side Effect와 use Effect

Side Effect

• rendering이란 state, props를 기반으로 UI요소를 그려내는 행위
• 렌더링 결과물에 영향을 주는 요소는 state와 props
• side Effect: 부작용, 부수효과. 컴퓨터과학에서는 함수 결과값 이외에 다른 상태를 변경 시킬 때 부작용이 있다고 함.
• input-output 이외의 다른 값을 조작한다면 Side Effect가 있다고 표현
• side Effect는 react의 함수 컴포넌트에서도 일어날 수 있음
• 렌더링이 아니고 외부 세계에 영향을 주는 어떠한 행위
• ex) Data Fetching, DOM직접 접근(이벤트리스너 등록), 구독 등
• render에서 실행하면 안됨

UseEffect

• side Effect를 일으키기 적절한 장소: useEffect
• • 리액트의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구로 생각하세요
• 순수한 세계:input->output
• 렌더링 이외에 일으켜야하는 side effect를 일으킬 탈출구(useEffect)
• side Effect를 렌더링 이후에 발생(useLayoutEffect는 예외)
• useEffect가 수행되는 시점에 이미 DOM이 업데이터가 되었음을 보장, side effect가 렌더링에 영향을 주지않도록 설계되었음을 의미
• effect를 일으킬 타이밍 : 의존성배열(Dependancy Array)
• side effect 이후 업데이트 된 정보가 있어 새롭게 화면에 그려야할 경우 새롭게 렌더링을 일으킴

Renderring Cycle with useEffect

useEffect(실행시킬 동작, [타이밍])
document.addEventListener(“타이밍”, 실행시킬 동작)

• 매 렌더링마다 side Effect가 일어날 경우는 두번째에 인자가 없음
• 첫번째 렌더링 이후 한번 실행되고, 이후 특정 값의 업데이트를 감지했을때마다 실행할경우 인자가 있음
• 사이드 이펙드가 첫번째 렌더링 이후 한번 실행되고, 이후 어떤 값의 업데이트도 감지하지 않도록 해야하는 경우
• 두번쨰 인자가 빈배열
• usecycle hook
• 1. 컴포넌트가 렌더링 (마운트)
• 2. 첫번째 인자로 넘겨준 함수 실행(사이드이펙트)
• 3. 렌더링(상태나 속성 변경된 경우)
• 4. useEffect는 두번째 인자에 들어있는 의존성 배열을 체크

• (1. 만약 두번째 인자에 아무값도 넘기지 않았거나 배열에 들어가있는 값들중 하나라도 없데이트된것이 있으면 첫번째 인자로 넘겨준 함수가 실행(사이드이펙트)

• (2. 하나도 없거나 빈배열이면 아무런 일도 하지않음)
• 5. 앞에서 일으킨 이펙트에서 상태나 속성을 변경시켰으면 다시 렌더링
• 6. 중략
• 7. 컴포넌트가 필요없어지면 화면에서 사라짐. unmmount