블로깅 챌린지 - useEffect, side effect

✍ 복습 자료

• useEffect

  React에서 제공하는 useEffect()는 Side-Effect를 처리하기 위해 사용한다.

  컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook

• side effect

  함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위
  component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과

  함수에서 전역변수의 값을 변경하는 것.
  함수 외부에 존재하는 버튼의 텍스트를 변경, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것이 있다.

• side effect를 왜 줄여야 할까?

  프로그램을 읽기 어렵게 하고, 실행상태를 예측하기 어렵게 하며 개발비용을 증가시킨다고 보기 때문에 최근 선언형 프로그래밍에서는 Side-Effect를 최소화하는 방향으로 변하고 있다.

  함수는 전달받은 매개변수를 통해 연산을 수행하고 결과를 반환해야 하며 그 결과는 항상 일관되고 예측할 수 있어야 프로그램이 쉽고 단순하며 유지보수 하기 쉬워지기 때문이다.

  function UserProfile({ name }) {
  const message = `${name}님 환영합니다!`; //함수 반환 값 생성
  
  // 함수 외부와 상호작용하는 Side-effect 코드
  document.title = `${name}의 개인정보`; 
  return <div>{message}</div>;
  }

  • 위의 코드가 side effect 코드인 이유?
    함수가 매개변수를 받아 결과를 생성하는 것과 무관한 행동을 하고있기 때문이다.

  • side effect 처리

    function UserProfile({ name }) {
    const message = `${name}님 환영합니다!`;
    
    //Side-Effect 코드를 UseEffect로 분리
    useEffect(() => {
      document.title = `${name}의 개인정보`; 
    }, [name]);
    return <div>

  1. 함수형 컴포넌트가 빠르게 렌더링 될 수 있게 도와준다.
  2. 프로그램을 복잡하게 만드는 Side-Effect 영역을 함수와 분리할 수 있게 도와준다.

• useEffect 사용

  1. useEffect(() => {})
     화면이 렌더링 될 때마다 실행된다. => 이렇게 코드를 작성하는 경우는 거의 없다.

  2. useEffect(() => {},[])
     렌더링 후 딱 한번만 실행

  3. useEffect(() => {},[x])
     렌더링 후 한번 실행되고, x가 바뀔 때마다 실행