211210 리액트 입문 - 리액트 훅 2

아래는 ID로 프로필 정보를 보여주기 위해 API를 호출하는 함수이다.

import React, {useState,useEffect} from 'react';

export default function Profile({userId}){
  const [user, setUser] = useState(null);

  useEffect(()=>{
	  getUserApi (useId).then(data => setUser(data));
  }, [userId]);


  return
    <div>
      <p> {`name is ${user.name}`}</p>
      <p> {`age is ${user.age}`}</p>
    </div> 
}

const USER1 = {name :'mike', age:10};
const USER2 = {name :'D', age:20};

function getUserApi(userId){
  return new Promise(res =>{
    setTimeout(()=>{
   	 res(userId % 2 ? USER1 : USER2);
    }, 500);
  });
}

 

export default function App(){

  const [userId, setUserId] = useState(0);

  return
    <>
      <Profile userId={userId}/>
      <button onClick={()=>setUserId(userId+1)}> up </button>
    </>
}

그런데 프로필에서 매번 부수효과를 호출하는 것은 낭비이므로,

* 의존성 배열 을 사용한다.

useEffect(()=>{
	getUserApi (useId).then(data => setUser(data));
}, [userId]); //<- 두번째 파라메터

라면 두번째 param에서 전해준 배열이 변경될 때만 렌더링 시
useEffect가 실행된다.

부수효과에서 사용한 변수를 잘 보면

내부에서 사용하는 변수들은 모두 넣어줘야한다.!
예외) 외부함수, 상태값 변경함수(useState(...)[1])
포함할것) 내부함수, 지역변수, 상태값 등...


지역변수를 사용한다고 해도 반드시 의존성 배열에 입력해야한다!
lint 에러가남
ex)

const value = ~;.
useEffect(()=>{
  console.log(value);
  getUserApi (useId).then(data => setUser(data));
}, [userId, value]);

* 내부함수는 컴포넌트 생성 시 마다 함수가 생성된다.
상태값 변경시마다 호출한다면?
-> useCallback()이라는 훅을 이용하여 메모이제이션을 활용한다.

 

 

많은 버그가 의존성 배열을 잘 못 사용해서 생긴다!

 

---

* 부수효과 함수의 리턴값


// WidthPrinter.js

//창의 너비를 상태값으로 관리 및 출력
//리사이즈시 상태값변경
export default function WidthPrinter(){

  const [width, setWidth] = useState(window.innerWidth);

  useEffect(()=>{
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListenr('resize',onResize);
    console.log('pr1');

    /* 부수효과 내의 리턴값 = 함수*/
    return ()=>{
      window.removeEventListener('resize', onResize);
      console.log('pr2');
    };
  }, []);

  return <div> {`width is ${width}`}</div>
}

 

// App.js
export default function App(){

  	const [count, setCount] = useState(0);
    
	return
      <>
        {count === 0 && <WidthPrinter />}
        <button onClick={()=> setCount(count + 1}}>증가</button>
      </>
}

* 부수효과함수 내부에서 리턴해주는 함수는
다음 부수효과 함수가호출되기 직전  || 컴포넌트가 unmount되기 직전 호출된다.
컴포넌트가 unmount되기 전에 적어도 1회 호출되는 것이 보장된다!


* 빈 의존성 배열?

useEffect(()=>{
	...
}, []);

이렇게 의존성 배열이 빈배열을 준다면
컴포넌트가 생성될때만 호출하게 된다!

빈배열로 생성 시 1회
부수함수 리턴함수로 소멸 시 1회 세트
=> eventHandler를 추가/제거하는 패턴을 볼 수 있다.