Today I Learned 📝
- react : 기초 복습
- react : useCallback, useMemo
react : 기초 복습
state 저장하는법
- 변수로 저장하거나 useState를 이용해 저장할 수 있다.
- 변수는 변경되어도 자동 rendering 되지 않고 새로고침 해야만 rendering 된다.
- useState를 이용해서 state를 만들면 state값이 변경되었을때 html이 자동으로 재 rendering 된다.
component의 특징
- 컴포넌트는 보통 영어 대문자로 시작한다.
- return 밑에는 여러개의 태그가 들어갈 수 없다.
- 만약 여러개의 태그를 넣고 싶으면 div로 묶을 수 있지만, 의미없는 div를 사용하고 싶지 않으면
<></>fragments로 묶을 수도 있다. - 보통 component안에 component를 만들지는 않는다.
- 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 재 rendering 된다.
component로 만드는 경우
- 사이트에 반복해서 출현하는 html
- 내용이 자주 변경될 것 같은 부분
- 같은 layout의 page를 제작할때
react : useCallback, useMemo
useCallback 은 useMemo 와 비슷한 Hook이다
useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 반면, useMemo 는 특정 결과값을 재사용하고 싶을때 사용합니다.
- useCallback을 사용하면 해당 함수가 필요할 때만 변경이 된다
- 의존성 배열이 바뀌기 전까지 함수 자체를 기억한다
- 자식 컴포넌트에 함수를 props로 내릴때는 useCallback을 반드시 사용한다 (자식 리 rendering 방지)
useCallback - 함수를 캐싱하는것
useMemo - 값을 캐싱하는 것
reference 🔗
[모던리액트] 17. useMemo 를 사용하여 연산한 값 재사용하기
https://react.vlpt.us/basic/18-useCallback.html
