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로 확인이 가능하다.
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]);
JS의 querySelector 와 같은 역할을 한다. 다만, 전역으로 작동하지 않고 해당 컴포넌트 내부에서만 작동하기 때문에 컴포넌트를 재사용성을 생각한다면 useRef를 많이 사용하는 것은 좋지 않다.
let countThree = useRef(0); countThree.current = countThree.current + 1;
JS에서 전역 변수에 값을 할당하는 개념이라고 생각하면 된다.
useEffect와 비슷하다. state가 있는 컴포넌트에 state 변화가 생기면 재평가 후 새로 랜더링한다.
const 변수 = useMemo(()=> { return 부하가_좀_있는_함수(감시하고_있는_변수) }, [감시하고_있는_변수])
감시하고 있는 변수가 변경되었 을때 부하가 좀 있는 함수가 실행된다. 렌더링 전에 실행되어 메모이제이션한 것을 반환해준다.
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;
useMemo
useMemo(실행될 것, [값])라고 할 때 useMemo는 렌더링 '전'에 실행되어 '메모이제이션'한 것을 반환한다. 즉, 값이 바뀌었는지 확인하고 렌더링 '전'에 저장된 것을 보내준다.useEffect
useEffect는 렌더링 '후'에 동작한다. 렌더링 후에 상태가 업데이트 되었을 때를 감지하여 동작한다.
✍ 차이점
useMemo
는 렌더링에 직접적인 영향을 미칠 수 있다. 예를 들면, 함수에서 컴포넌트 등을 반환하게 했을 때 렌더링하기 이전에 저장된 값을 반환하여 리렌더링을 하지 않도록도 할 수 있다.
useEffect
는 렌더링한 이후에 동작되기 때문에 리렌더링을 방지하지 못 한다.즉,
useMemo
는 리렌더링이나 불필요한 재실행 과정을 막는 방법(최적화)에 사용하기 적합하고,useEffect
는 상태를 이용한 관리에 사용된다.
💬 요약
- 렌더링 전 :
useMemo
/ 렌더링 후 :useEffect
- 상태 변화를 감지하여 effcet를 동작하게 하고싶다면
useEffect
- 값을 저장하여 불필요한 동작 또는 렌더링을 막아 최적화하고 싶다면
useMemo