[React] react에서의 Side Effect

 

[React] react에서의 Side Effect

Side effect는 함수나 컴포넌트가 자신의 입력값 이외의 외부 상태를 변경하거나, 외부 시스템과 상호작용할 때 발생하는 동작을 의미합니다.

 

 

useEffect에서의 Side Effect:

• 정의: 컴포넌트가 렌더링되고 브라우저가 스크린 페인트 이후에 실행되어 외부 시스템과 상호작용하거나 상태를 변경하는 동작.
• 예시: 데이터 가져오기, 타이머 설정, DOM 조작 등.

useEffect(() => {
  document.title = `You clicked ${count} times`; // 사이드 이펙트: DOM 업데이트
}, [count]); // count가 변경될 때마다 실행

 

 

이벤트 핸들러에서의 Side Effect:

• 정의: 사용자 상호작용에 반응하여 프로그램의 상태를 변경하거나 외부 시스템과 상호작용하는 동작.
• 예시: 버튼 클릭 시 상태 변경, API 호출 등.

function handleClick() {
  setCount(count + 1); // 사이드 이펙트: 상태 변경
}

 

 

요약

• Side effect는 함수가 자신의 입력값 이외의 외부 상태를 변경하거나 외부 시스템과 상호작용하는 모든 동작입니다.
• React 컴포넌트에서 useEffect는 컴포넌트가 렌더링된 후에 발생하는 side effect를 처리합니다.
• 이벤트 핸들러에서는 사용자의 상호작용에 대한 반응으로 side effect가 발생합니다.
• 외부상태란?
  • 함수나 컴포넌트의 범위를 벗어난 상태나 시스템을 말합니다.  
  • 컴포넌트 밖에 있는 상태: 함수 컴포넌트가 직접 접근하지 않는 상태, 예를 들어 전역 상태, 브라우저 API(DOM 조작 등), 서버 데이터, 로컬 스토리지 등이 있습니다.
  • 컴포넌트의 입력값 외부: 컴포넌트의 props, state 이외의 모든 외부 상태나 시스템.
  • ( 서버와의 상호작용,  브라우저 API와의 상호작용,  DOM을 직접 조작하거나, localStorage, sessionStorage와 같은 브라우저 API를 사용, 전역 상태 변경 )