[React] Effect Hooks

Jes·2022년 6월 14일

🔎 React 내부 데이터 흐름

리액트 공식문서 주요개념 5번에 데이터는 아래로 흐릅니다. 라는 개념이있다.
즉 리액트는 하향식 또는 단방향 흐름 원칙이다.

(부모:댓글화면 , 자식들중하나:댓글추가)
그런데 댓글기능에서 새댓글 추가시 자식에 의해 부모 컴포넌트에 상태가 변한다. 그것은 어떻게 되는 경우일까? 역방향 흐름인데, 이 문제는 상태를 변경 시키는 함수를 자식에게 props로 전달해 해결할 수 있다.

어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
react에서 내부 데이터를 하위 컴포넌트로 전달할때는 props를 사용한다.
상태위치정하기 : 두개의 자식 컴포넌트가 하나의 상태에 접근 하고싶을때는 같은 부모 컴포넌트에 상태를 위치해야 한다. state를 부모 컴포넌트에 위치시키고, state갱신 값을 자식에게 받아와서 부모도 변경되도록 한다.

💡 Side Effect

사이드 이펙트는 쉽게 말해서 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미한다.

함수 내에 설정값이 외부에 영향을 끼쳐 값이 변경 되는경우 그 함수는 side effect가 있다고 한다. 리액트에서는 컴포넌트 내에서 fetch를 사용해 api 정보를 가져오거나 dom을 조작할때 발생한다.

Side Effect 는 필수로 UserEffect 안에서 사용해야한다
컴포넌트의 순수함수적인 특징에 위배되는 기능들, 네트워크 요청같은 기능들
네트워크요청이 가장 대표적인 Side Effect이다.

✅ Pure function (순수함수) 의 특징

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미하고, 그외 값이 바뀌거나 영향을 끼치는경우 순수함수가 아니다.

항상 같은 값이 리턴된다.
예측이 가능하다.
함수 내부에서 실행되어 변경되는 것이지 입력값 자체를 수정하지 않는다.

const Nike = ({dunk,jordan}) => {
	return (
    	<div>
        	<div>{dunk}</div>
        	<div>{jordan}</div>
        <div>
    )
}

dunk, jordan 이라는 props를 입력받아 JSX 엘리먼트로 출력된다. Side Effect가 없고 순수 함수이다.

🕠 useEffect

컴포넌트내에서 Side Effect를 실행할 수 있게 하는 Hook이다.
useEffect는 2개의 인자값을 입력받는데, 첫번째 인자는 함수이고, 함수내에서 SideEffect를 실행하도록 설정한다.

컴포넌트 생성 후 첫화면에 렌더링
컴포넌트에 새로운 props가 전달되며 렌더링
컴포넌트에 상태가 바뀌며 렌더링

될때 함수가 실행된다.

두번째 인자로는 종속성 배열(Dependency Array) 을 입력받는다.

useEffect( () => {함수} , [종속성1,종속성2,...])
배열의 요소의 값이 변할때 함수가 실행되는 원리이다. 즉, 값이 바뀔때 함수내의 SideEffect가 발생한다.
빈배열을 인자로 받는경우 실행이 안되는데, 첫화면에 렌더링 될때만 effect가 실행되고 끝
이경우는 처음 한번만 외부 API 를 통해 리소스를 받고, 더이상 필요하지 않을때 사용한다.

2번째 인자가