모처럼 나를 많이 찾지 않는 오늘처럼 여유있는 날에는~~~
메세지와 티켓이 날라올까 틈틈히 회사 메일을 확인하지만, 이런 날이 있음에 참 감사하다.
덕분에 오랜만에 React hook 영상 정주행!
오늘의 목표는 오전에 회사 연봉 협상 관련해서 또? 이메일을 쓰고 곧.. 1년차가 다 되어 가거등요..
그리고 오후에는 React Hook, 에러 핸들링, 그리고 여유되면 자바스크립트 알고리즘 강의 정도를 듣기로 했다.
나는 이 분 강의 귀에 딱딱 들어오고 너무 길지도 않고 유익한듯!
https://www.youtube.com/watch?v=V9i3cGD-mts&list=PLApy4UwQM3UrZsBTY111R6P4frt6WK-G2
보면서 메모장에 정리한 노트.
Hooks from React
1. useState
convention -> setCount
can set a default value <- optional
2. useEffect : asynchronous
useEffect (() => {
// the code that we want to run
console.log(‘the count is:”, count);
// optional clean-up function
return() => {
console.log(‘I am being cleaned up’);
};
}, [count]) // the dependency array
// [] : guarantee to run at least once
3. useMemo : performance, memoize === freeze
In React, to update state you have to trigger the entire component.
Check whether anything is re-computed
const selectedItem = useMemo(() => items.find((item)=> item.isSelected), [items])); <- 얘만 바뀌면 렌더링ㅇㅇㅇㅇ
4. useCallback : wrap your function -> memoize
In React, functions, even if they have the same codes, are always different so it renders.
const handleSearch = useCallback(()=> { <—- identical : 똑같게 만들어서 unnecessary re-render을 막는다.
console.log(users[0])
const filteredUsers = allUsers.filter((user) => user.includes(text));
setUsers(filteredUsers);
}, [users]);
5. useRef : think as a state but does not trigger the re-rendering, x for return body
const countRef = useRef(0);
countRef.current++; // 콘솔에 찍으면 ref는 올라가고 state 는 0으로 나옴
그 이유는? state는 new rendering 이 될 때.
Meanwhile, ref is isntantly updated.
Input element or HTML element
useEffect(()=>{
inputRef.current?.focus();
},[])
6. useTransition : Tab switching case , defer a tab and prioritize others
const [isPending, startTransition] = useTransition(); // you can
const selectTab = () => {
startTransition(()=>{ // just wrap it
setTab(tab);
});
}
if (isPending) {
return <p>Loading..</p>
}
7. useDefferedValue : without freezing UI, works only after finishing typing
used in search function
x array, object -> this will create a loop.
8. useLayoutEffect : when updates are not happening at the same time, instead of useEffect useLayoutEffect
twice as slow
It is synchronous!!
9. useImperativeHandle : expose child component function to the parent component
얘 좀 중요한듯!! 자식의 기능을 부모로, 즉 아래에서 위로 올려버림 !!!
===========Child component===============
1) import forwardRef
export default forwardRef Counter;
const reset = () => {
setCount(0);
}
2) useImperativeHandle(ref, () => ({}));
// this is the basic look
useImperativeHandle(ref, () => ({
reset
}));
===========parents component=============
counterRef = useRef(null);
<Counter ref={coutnerRef}/>
<Button onClick={()=> coutnerRef.current?.reset()}>
Reset From Parent
</Button>
확실히 그냥 보는 것보다 뭐라도 끄적이면서 봐야지 기억에 남을 듯~!
개발은 암기보다는 활용법을 인지하고 적용하는 것이 진리니까..
마지막으로 useContext 봐야하는데 상태관리를 Redux 쓰고 Redux Toolkit 쓰니까 구미가 확 안 당기고 당이? 당기지만 깔끔하게 보는걸로.
나와 한 약속들이 매우 중요하니까, 꼭 지키도록 하자!
어거지로 상황에 몰려서 하는 것 보다 내가 주체적으로 하도록 하자.
그리고 무엇보다, 이런 여유로운 시간에 틈틈히 공부를 해둬서, 추후 개발에 적용할 수 있도록 밑거름을 잘 준비합시다.
연봉 협상 기도 손!
참고로 저랑 백엔드 개발자 둘이서 어찌 저찌 해낸 GS 인증이 무탈하게 잘 마무리 되었고 어제 자로 안전 대시보드 프로젝트도 잘 배포 되었습니다..!
감사합니다.