[TIL] 211230

먼지·2021년 12월 30일

TIL

목록 보기

11/57

2021-12-30 목요일 / 2022년까지 이틀.. 😂🔥

🤍 일일회고

오늘의 도전과 배움
real world 실습. 리액트. 하하
학습하면서 궁금하거나 어려웠던 점

내일 해보고 싶은 것들
내일

요즘 잠을 제대로 못 자서 그런지 이래저래 지치고 힘들어서 다 때려치고 싶으나 사실상 불가능하므로 쥐어짜서라도 힘을 내보자. 누가 옆에서 매일 따뜻하게? 채찍질을 해줬으면 하하

💙 리액트를 다루는 기술

8.2 useEffect

8.2.3

컴포넌트가 언마운트 되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 뒷정리(cleanup) 함수를 반환! 렌더링될 때마다 나타나고 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여줌. cleanup function은 언제봐도 잘 모르겠다..

useEffect(() => {
  console.log('effect');
  return () => {
    console.log('cleanup');
  };
}, []);

8.3 useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook으로 상태 업데이트 로직을 컴포넌트 외부로 분리시킬 수 있음.
이 hook도 몇 번 써봤는데 나한텐 다 흩어져있는? 느낌이 잘 안 읽혀서 redux도 그렇고 잘 안 맞았지만 익숙해져야겠지..

예제는 이사이트를를 참고!
https://react.vlpt.us/basic/20-useReducer.html

8.4 useMemo

함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있음.
예를 들어 input value가 수정될 때 전혀 관련없는 함수가 호출되고 계속 렌더링돼서 계산을 낭비하는 경우.. 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식.

// 예제가 길어서 사용법만 ㅎ
import React, { useState, useMemo } from 'react';

const func = (v) => {
  console.log('어찌구');
  return v + 1;
}

const App = () => {
  ...
  const fn = useMemo(() => func(v), [v]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <p>{fn}</p>
    </div>
  );
};