이노캠 7주차(월) -memo 정리

📌오늘의 진도

useContext-Redux Payload까지... 쭉 나갔다. 이해는 추후에 할 예정이다.

✅html태그 nav & footer은 뭘까?

• HTML <nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.
• HTML <footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타낸다. 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다. 쉽게 말해 꼬리말인 듯 함.

📌Memo정리

1.React Memo란?

• 리렌더링 될 필요없는 자녀 컴포넌트를 렌더링 되지 않게 만들어주는 React Hook.
• 자녀컴포넌트를 리렌더링 하고 싶지 않을 때 자녀 컴포넌트의 이름이 예를 들어, abc.jsx 라면 export 할때 export default React.memo(abc);로만 입력해주면 부모 컴포넌트가 렌더링 할때 abc는 렌더링하지 않음.

2.useMemo란?

• 성능을 최적화할 때 사용한다.
• 기존에 매 렌더링마다 실행되었던 복잡한 계산을 방지할 때 유용하다.
• memo는 memorized의 약자이다.=> 이미 저장한 값을 꺼내와서 쓴다.(캐싱을 한다고도 표현함)

✅사용방법

• 첫번째 인수에는 함수, 두번째 인수에는 배열을 넣어주면 된다.
• 두번째 인수에 넣어준 배열의 값이 바뀔때만 함수가 실행된다.그렇지 않다면 이전의 값을 재사용한다.
• 주의점: 너무 남발하면 별도의 메모리 확보를 너무 많이 하게 되기 때문에 오히려 성능이 악화될 수 있음.

const value = useMemo(()=> {
	return 반환할_함수()
}, [dependencyArray]);