211218 리액트 다른 훅

리액트 내장 훅

useState
useEffect
useContext
useRef

useMemo, useCallback
=> 메모이제이션


const timerIdRef = useRef(-1)

useEffect(()=>
timerIdRef.current = setTimeout(()=>{}, 1000);
});
=> 타이머는 렌더링과 상관없음 
// 불필요하게 state로 관리할 필요가 없으므로  Ref 객체가 적합하다.

---

* useMemo
계산량이 많은 함수를 저장

const value = useMemo(()=> runExpensiveJob(v1,v2), [v1,v2]);
useEffect와 마찬가지로 두번째의 배열은 의존성 배열임.
v1,v2 값이 변경될때만 runExpensiveJob이 수행된다.

import React, {useMemo, useState} from 'react'


export default function App(){


	const [v1, setV1] =  useState(0);
	const [v2, setV2] =  useState(0);
	const [v3, setV3] =  useState(0);

	const value = setMemo(()=>runExpensiveJob(v1, v2), [v1,v2])
	//두번째 param? useeffect 처럼 의존성 배열.
	// 각 원소가 변경될때만 함수가 수행된다.


	return <div>
		<p>{`value is ${value}`}</p>	//value가 호출 되며 runExpensiveJob이 1회 호출
		
		<p>{`v3 changed to ${v3}`}</p>
		<button onClick={()=>setV3(Math.random)}>v3 수정</button>
		// 버튼이 눌려서 v3가 변경되어도 runExecuteJob이 호출되지 않는다.
	</div>
}

function runExpensiveJob(v1,v2){
		// 비싼 함수
	return 3;
}

 

 

---

 

 

* useCallback()

useMemo와 비슷하다. 함수 memoization에 특화..

import React, {useCallback, useState} from 'react'


export default function App(){


	const [name, setName] =  useState(0);
	const [age, setAge] =  useState(0);
	const [v3, setV3] =  useState(0);


	return <div>
		<p>{`name is ${name}`}</p>
		<p>{`age is ${age}`}</p>
		<UserEdit
			onSave={()=>saveToServer({name,age})}
			setName={name}
			setAge={age}
		/>
		<p>{`v3 is  ${v3}`}</p>
		<button onClick={()=>setV3(Math.random)}>v3 수정</button>
	</div>
}


const UserEdit = React.memo(function ({onSave,setName,setAge}){
	console.log('userEdit rendered')
	return null;
});

function saveToServer(a, ..){

	//saved
}

//v3 가 변경이 되어도 saveToServer가 새로 생성되어 전달될것이기때문에 
//UserEdit이 다시 렌더링 됨.

-> 이렇게 변경하기

const onSave = useCallback(()=>{saveToServer({name,age}), [name,age]});

...
<UserEdit
	onSave={save}
	setName={name}
	setAge={age}
/>

---

useReducer, useRef 는 나중에 다시 보자.. 하나도 모르겠ㅇ움ㅎ