프도

React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. useEffect 함수형 컴포넌트 안에서 useState로 state값을 선언하고, 값 자체를 변경할 수 있는 수단(set함수)를 마련했다면, (한마디로 준비물 역할?) useEffect()는 화면 렌더링이 될 때마다 state라고 부르고 data라고 읽는 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다. useEffect( (안에) => { 익명 함수 } ) 로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다. 그래서 클래스형 컴포넌트의 componentDidMount ..

함수의 로컬 상태를 함수 외부에서 변경하는 경우, side effect가 발생했다고 한다. 이 개념을 react에 적용하면, function component 외부에서 로컬 상태의 값이 변경되는 것이 side effect라고 할 수 있다. 흔한 경우로 비동기 처리가 있을 것이다. 즉, react에서 side effect란, 리액트 컴포넌트가 화면에 렌더링 된 이후에 비동기적으로 처리되어야하는 부수적인 효과들을 side effect라고 일컫는다. React 마운트, 업데이트 과정 / 라이프 사이클 Render phrase에서 리액트는 새로운 props와 state를 바탕으로 Virtual DOM에 반영할 부분을 계산하며, Virtual-DOM을 생성한다. (추가로 갱신의 경우에는 어떤 차이가 있는지 파악한..

01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(답답함)을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 side effect 를 수행하는역할을 한다. side effect 를 줄여 그냥 effect 라고 한다. 그래서 훅의 이름은 useEffect 가..