📖 오늘 학습 뽀인트!

1. React
   1-1 Route에서 match
   1-2 useEffect
   1-3 useRef
   1-4 useMemo
   1-5 정리
   1-6 useEffect와 useMemo

1 React

1-1 Route에서 match

match는 보통 동적인 URL를 렌더링할 때 사용한다.

---

<Route path="/blogdetail/:id" exact component={BlogDetailPage} />

function BlogDetailPage({ match }) {
    //http://localhost:3000/blogdetail:3
    return <h1>BlogDetailPage</h1>;
}

---

path="/blogdetail/:id" 에서 /:변수명은 동적으로 URL을 할당할 때 사용한다.
props -> match -> params -> 변수명을 가진 key로 확인이 가능하다.

1-2 useEffect

state 변경 후 렌더링 후에 뭔가 추가적인 작업이 필요할 때 useEffect를 사용한다.

useEffect(()=>{
	// state가 변경되어 렌더링 후에 실행하는 부분!
	return()=>{
	// 다시 렌더링을 하기 이전에 컴포넌트를 제거!
	}
},[state 값(들어가지 않으면 최초 1번만 실행됩니다.*/)]) 

---

useEffect는 state 변경되어 렌더링 후에 작업을 하기 때문에 첫 state 초기화 할 때도 동작을 한다. 즉, 변수의 값을 변경하지 않아도 첫 동작을 한다. 이후 state를 useState로 변경하면 재렌더링이 되고 이때 또 useEffect가 동작한다.

const [checkRender, setCheckRender] = useState(false);
  useEffect(() => {
    if (checkRender) {  // 첫 실행에서는 false이기 때문에 실행 되지 않음
        .... 동작
      }
    }
    setCheckRender(true);   // true로 변경하여 다음부터 사용
  }, [count])

위에서 말한 것과 같이 첫 렌더링에서도 useEffect는 동작한다. 위 코드처럼 내부 조건문으로 첫 렌더링에서의 동작을 막을 수 있다.

---

✍ clean-up
useEffect Hook 안에서 리턴할 수 있는 함수로, 컴포넌트가 언마운트 되기 전에 코드를 청소한다.

useEffect(() => {
        let time = setInterval(() => {
            const day = new Date();
            setToday(day);
            setHour(day.getHours());
            setMin(day.getMinutes());
            setSec(day.getSeconds());
        }, 1000);
        return () => {
            clearInterval(time);
        };
    }, [today]);

1-3 useRef

JS의 querySelector 와 같은 역할을 한다. 다만, 전역으로 작동하지 않고 해당 컴포넌트 내부에서만 작동하기 때문에 컴포넌트를 재사용성을 생각한다면 useRef를 많이 사용하는 것은 좋지 않다.

let countThree = useRef(0);
countThree.current = countThree.current + 1;

JS에서 전역 변수에 값을 할당하는 개념이라고 생각하면 된다.

1-4 useMemo

useEffect와 비슷하다. state가 있는 컴포넌트에 state 변화가 생기면 재평가 후 새로 랜더링한다.

const 변수 = useMemo(()=> {
  return 부하가_좀_있는_함수(감시하고_있는_변수)
}, [감시하고_있는_변수])

감시하고 있는 변수가 변경되었 을때 부하가 좀 있는 함수가 실행된다. 렌더링 전에 실행되어 메모이제이션한 것을 반환해준다.

1-5 정리

const [count, setCount] = useState(0);
const [countTwo, setCountTwo] = useState(0);
let countThree = useRef(0);
let countFour = 0;
    
    // 변수 값 변경, useEffect로 변수 변경 감지 됨, 재랜더링 발생
    useEffect(()=>{setCount(count + 1)},[count])
    
    // 변수 값 변경, 재랜더링 발생
    setCountTwo(countTwo + 1);
    
    // 변수 값 변경, 재랜더링 발생 안 됨. 다시 호출해도 초기화 되지 않음.
    countThree.current = countThree.current + 1;
    
    // 함수(컴포넌트) 내에서 변수 값만 변경. 다시 호출하면 0으로 초기화 됨
    countFour = countFour + 1;

1-6 useEffect와 useMemo

1. useMemo
   useMemo(실행될 것, [값])라고 할 때 useMemo는 렌더링 '전'에 실행되어 '메모이제이션'한 것을 반환한다. 즉, 값이 바뀌었는지 확인하고 렌더링 '전'에 저장된 것을 보내준다.

2. useEffect
   useEffect는 렌더링 '후'에 동작한다. 렌더링 후에 상태가 업데이트 되었을 때를 감지하여 동작한다.

---

✍ 차이점
useMemo는 렌더링에 직접적인 영향을 미칠 수 있다. 예를 들면, 함수에서 컴포넌트 등을 반환하게 했을 때 렌더링하기 이전에 저장된 값을 반환하여 리렌더링을 하지 않도록도 할 수 있다.

useEffect는 렌더링한 이후에 동작되기 때문에 리렌더링을 방지하지 못 한다.

즉, useMemo는 리렌더링이나 불필요한 재실행 과정을 막는 방법(최적화)에 사용하기 적합하고, useEffect는 상태를 이용한 관리에 사용된다.

---

💬 요약

• 렌더링 전 : useMemo / 렌더링 후 : useEffect
• 상태 변화를 감지하여 effcet를 동작하게 하고싶다면 useEffect
• 값을 저장하여 불필요한 동작 또는 렌더링을 막아 최적화하고 싶다면 useMemo