(4주차-5)정보통신산업진흥원 AI 웹개발 취업캠프-React.memo|use.Memo|useCallback|useReducer

React.memo

불필요한 연산과 메모리 용량을 줄일 수 있다! 

React.memo함수를 이용하면 컴포넌트의 props가 변경되지 않았을 떄 리렌더링이 되는 것을 방지하여 성능최적화를 도모할 수 있다. 변경 사항이 없음에도 리렌더링이 되는 것은 불필요한 자원을 낭비하는 일이므로, 이는 무척 유용한 기능이다.

이러한 React.memo의 기능을 가르켜 '메모이제이션(Memoization)'이라고 한다.

사용형태
React.memo(컴포넌트)
React.memo는 props 변화와 관계 있는함수로, 컴포넌트 내부의 state 변경 시에는 리렌더링이 진행된다.

컴포넌트 A (부모) - 상태변화 후 리렌더링

컴포넌트 B (자식) - 부모가 렌더링 되니까 같이 렌더링 

=> 컴포넌트 B는 리렌더링 될 필요 없음-> 메모이제이션 (렌더링될 필요 없으면 하지말자)

 

const App = () =>  {

  console.log("App is rendered")

  const [ currentText, setCurrentText ] = useState("")

  const [ listText, setListText ] = useState([])

 

  return <>

    <Form setCurrentText={setCurrentText}

    setListText={setListText}

    currentText={currentText}

    listText={listText} />

  </>

}

App() : 'currentText, listText 상태변수와 setCurrentText, setListText 상태변경함수' 를 관리하고 있음

전부 자식 컴포넌트인 Form에 넘겨주게 됨.

App에서 상태변화가 되면 리렌더링 된다. => 자식요소인 Form에서도 리렌더링이 일어난다. 

const Form = ({ listText, currentText, setListText, setCurrentText }) => {

  console.log("Form is rendered")

  return <form onSubmit={e => {

    e.preventDefault()

    setListText([...listText, currentText])

  }}

  >

    <input name="text"

    onChange={e => {

      setCurrentText(e.target.value)

    }}/>

    <input type="submit" />

    <Content listText={listText} />

  </form>

}

Form에서는 App에서 상태변화함수와 관련된 4가지 항목을 가져옴.(상태변수2, 상태함수2)

App에서 상태가 변화돼서 리렌더링 되면 자식요소인 Form도 리렌더링 됨

<input>에 내용을 쓰면 SetCurrentText 함수 변화 일어남. 이로인해 SetListText에도 변화가 일어남

( 기존텍스트+현재텍스트) => Form 리렌더링

Content는 Form의 자식요소이기 때문에 Form이 리렌더링 되면 Content도 같이 리렌더링 됨

하지만,Content는 lsitText와만 관련이 있음. 따라서 listText의 상태가 변화될 때만 리렌더링 되고 싶음 => React.memo 

const Content = React.memo(({ listText }) => {

  console.log("Content is rendered")

  return <ul>{listText.map((item, index) => <li key={index}>{item}</li>)}</ul>

})

Content 전체를 React.memo로 감싸주기-> 메모이제이션 (기억의 대상이 됨)

 

useMemo 

React.memo와 마찬가지로 메모이제이션 기능을 제공한다. 함수 호출 현태에서 차이를 보인다. 

사용형태
useMemo(함수, 의존성배열)
의존성 배열은 useEffect 함수의 의존성 배열과 같은 의미를 지닌다.

    {

      useMemo(() => {

        console.log("Content is rendered")

        return <ul>{listText.map((item, index) => <li key={index}>{item}</li>)}</ul>

      }, [listText])

    }

Content 부분을 useMemo를 사용해서 필요할 때만 리렌더링 되도록 함.

useMemo(()=> {},[listText]):  listText가 변할때만 변화하겠다

React.memo와 useMemo는 사용 목적은 같지만 사용 형태는 다르다. 

use와 관련된 컴포넌트는 함수형 컴포넌트에 대한 기능을 제공하기 때문에 가능함.

만약 클래스 기반 컴포넌트를 처리하기 위해선 React.memo를 사용해야 한다.

 

useCallback 

React.memo(), useMemo() : 리액트 컴포넌트에 대한 메모이제이션 제공

useCallback(): 하위 함수에 대한 메모이제이션 제공

차이점: 하나의 데이터가 아닌 함수를 반환하는 점. useCallback함수를 사용하면 컴포넌트가 리렌더링 될 때마다 내부 함수가 재정의 되는 것을 방지할 수 있다. 

사용형태
useCallback(컴포넌트내부함수, 의존성배열)
컴포넌트내부함수는 특정변수의 값이 변한 경우에만 재정의된다. 
함수가 매번 재정의 될 경우, 이는 자식 컴포넌트의 리렌더링으로 이어질 수 있다 

 

const Light = React.memo(({ room, on, toggle }) => {

  console.log({ room, on });

  return (

    <button onClick={toggle}>

      {room} {on ? "ON" : "OFF"}

    </button>

  );

})

Light 는 React.memo로 감싸져 있음 -> room,on,toogle이 변화할때만 리렌더링 되는 것 

const App = () => {

  const [masterOn, setMasterOn] = useState(false);

  const [kitchenOn, setKitchenOn] = useState(false);

  const [bathOn, setBathOn] = useState(false);

//on off를 바꿀 수 있는기능 : toogleMaster 원래 상태와 반전되게 함

//useCallback(): masterOn의 상태가 바뀌었을때  나머지 상태도 같이 재정의가 되어 리렌더링 되는것을 방지하는 것

  const toggleMaster = useCallback(() => setMasterOn(!masterOn), [masterOn]);

  const toggleKitchen = useCallback(

    () => setKitchenOn(!kitchenOn),

    [kitchenOn]

  );

  const toggleBath = useCallback(() => setBathOn(!bathOn), [bathOn]);

masterOn, kitchenOn, bathOn은 각각 useState함수로 정의 되어 있음 true, false 형태로 조명의 온오프 상태가 변화됨

toggleMaster=useCallback()으로 각 상태변수의 값이 변할 때 그 변수에 대해서만 리렌더링 됨

 

useReducer 

useState 함수의 대체 함수로 상태를 관리하는 함수이다. 상태 관리시에 비교적 복잡한 로직을 구현할 때사용한다.

사용형태
const [상태명, 디스패치] = useReducer(리듀서 함수, 상태 초깃값)
리듀서 함수: 내 상태를 관리해주는 중개인 함수 !

 

const App = () => {

  const [amount, setAmount] = useState(0) //얼마씩 입출금 하는지 결정

  const [account, bankClerk] = useReducer(customer, initialState); //통장잔고상태 reducer가 관리

  console.log(account)

  return (

    <>

      <h1>{account.balance}</h1>

      <input type="number" placeholder="금액 입력" step="1000" onChange={e => setAmount(e.target.value)} />

      <button onClick={() => bankClerk({type: 'withdraw', amountOfMoney: parseInt(amount)})}>-</button>

      <button onClick={() => bankClerk({type: 'deposit', amountOfMoney: parseInt(amount)})}>+</button>

    </>

amount: 얼마씩 입출금하는지 useState가 상태변화 관리

account: 통장잔고를 useReducer가 관리, customer 함수,  초기값 initialSate, bankClerk는 디스패치

account.balance 출력 

<input>에는 1000원 단위로 금액 입력하고 이벤트가 일어나면 setAmount 상태함수 발생

마이너스 <button>에는 bankClerk에서 돈을 출금하고, parselnt(문자열 형태의 숫자를 정수로 출력) amountOfMoney 발생