useEffect2 [React] 리액트 사이드 이펙트(Side-effect) 의미, 종류(feat. 순수함수) # 리액트 Side-effect의 의미와 종류 사이드 이펙트(Side-effect)란 React 자체에서는 제공하지 않는 모든 것을 말한다. 예를 들어, 아래의 작업들은 Side-effect 이다. fetch() 메서드 등을 통해 HTTP 통신을 시도하는 것 Local Storage 등에 데이터를 저장하는 것 DOM을 직접 조작하는 것 : ex) document.querySelector('.클래스명').add EventListener(...) setTimeout, setInterval 등의 타이밍 함수를 사용하는 것 위의 작업들은 브라우저의 Web API 등을 사용하는 것으로, React 자체의 기능은 아니다. React 입장에서는 자기가 제공하는 것 이외의 것(Side)으로 영향(Effect)을 미친.. 2023. 5. 6. [React] 컴포넌트 렌더링 과정 정리(useLayoutEffect vs. useEffect) # React 컴포넌트 재렌더링 케이스 - React 컴포넌트는 아래의 2가지 상황에서 재렌더링(Re-rendering) 된다. 1. 내부 상태값(state)이나 중앙 상태값(redux store 등)이 변경되는 경우 2. 부모 컴포넌트가 재렌더링되는 경우, 자식 컴포넌트도 재렌더링. - 컴포넌트가 렌더링되면, 해당 컴포넌트 함수가 호출되어 화면을 다시 그리는데, 이 과정을 정리해둔다. # React 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 단, hook 에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리된다. 3. return 실행 - 렌더링 시작 4. 렌더 단계(Render Phase) - 가상DOM을 .. 2022. 8. 9. 이전 1 다음