React[Lifting State Up / Effect hook]

리액트로 생각하기 이 링크를 참조해서 리액트를 공부하면 좋을 것 같다.

상태 끌어올리기 (Lifting State Up)

• 리액트의 데이터 흐름은 하향식 흐름이다. 하지만 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하게 된다면 역방향 데이터 흐름이 필요하다.

• 이를 제어하기 위한 것이 상태 끌어올리기(Lifting State Up) 이다.

상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.

import React, { useState } from "react";
export default function ParentComponent() {
  const [value, setValue] = useState("초기값");
  const handleChangeValue = () => {
    setValue("바꿀값");
  };
  return (
    <div>
      <div>{value}</div>
      <ChildComponent handleClickButton = {handleChangeValue}/>
    </div>
  );
}
function ChildComponent({handleClickbutton}) {
  const handleClick = () => {
   handleClickButton();
  };
  return <button onClick={handleClick}>값 변경</button>;
}

• 예시이다. 여기에서 부모 컴포넌트에서 props를 통해 상태변경 함수를 넘긴다. 그리고 그 안에서 상태를 제어하는 것을 볼 수 있다.

Effect Hook

Side Effect(부수 효과)

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다.

Pure Function(순수 함수)

• 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우는 순수 함수라고 하지 않는다.

• 순수 함수에는 Side Effect가 없으며, 순수 함수의 특징은 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값을 리턴됨을 보장하며, 예측 가능한 함수이다.

• React 컴포넌트에서의 Side Effect

  • 타이머 사용 (setTimeout)
  • 데이터 가져오기 (fetch API, localStorage)

Effect Hook

import { useEffect } from "react";
export default function App() {
	useEffect(() => {
    	// 함수실행문
    }, [종속성 배열])
}

• React 컴포넌트에서 Side Effect가 발생하는 것을 제어하기 위해 Effect Hook을 사용한다.

• 첫번째 인자는 함수이다. 해당 함수 내에서 side effect를 실행하면 된다.

• Effect Hook가 실행되는 순간

  • 컴포넌트 생성 후 처음 화면에 렌더링

  • 컴포넌트에 새로운 props가 전달되며 렌더링

  • 컴포넌트에 상태(state)가 바뀌며 렌더링

  • 이와 같이 컴포넌트가 새롭게 렌더링 될때 Effect Hook이 실행된다.

  • Hook 사용시 주의할 점

    • 최상위에서만 Hook을 호출한다.
    • React 함수 내에서 Hook을 호출한다.

• 두번째 인자는 배열이다. 배열에는 조건을 담고 있다. 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미한다. 해당 배열엔 어떤 값 목록이 들어간다. 이 배열을 종속성 배열이라고도 한다.

  • 여기에서 배열 내의 어떤 값이 변할 때에만, useEffect 내의 함수가 실행된다.

• 종속성 목록에 아무런 종속성도 없다면 ?

  • 빈 배열일 경우(useEffect(함수, []))
    • 이와 같이 사용하면, 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다.
  • 아무것도 넣지 않은 경우(useEffect(함수))
    • 이는 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, 상태(state)가 업데이트될 때 effect 함수가 실행된다.

Reference

• 코드스테이츠 강의자료