React의 functional/stateless component 클래스에서 React.useMemo 를 적용하려고 보니, 쓰는 문법/syntax 가 다소 헷갈렸다. 검색하면서 아래와 같은 예제들을 찾을 수 있었다.
React.memo
const MyComponent = React.memo(function MyComponent(props) {
/* props를 사용하여 렌더링 */
/* 유의점: props 변화에만 영향을 줍니다.
React.memo로 감싸진 함수 컴포넌트 구현에 useState 또는 useContext 훅을 사용한다면,
여전히 state나 context가 변할 때 다시 렌더링됩니다. */
});
React.useMemo
React.useMemo(()=>{ /*function*/ }, [dep])
const MyComponent = React.useMemo(({input}) => {
return (<Component>{input}</Component>)
}, [input])
export default MyComponent
const MyComponent = ({input}) => {
return (
React.useMemo(
return(
<Component><div>{input}*2</div></Component>
), [input])
)
}
const MyComponent = ({input}) => {
const render = React.useMemo((input) => {
<div>input*2</div>}, [input])
return(
<Component>{render}</Component>
)
}
const MyComponent = ({input}) => {
return(
React.useMemo(() => {
<Component>
<div>input*2</div>
</Component>
}, [input])
)}
리액트에서 리덕스, api fetch/axios 로 데이터를 통신하고 업데이트하다보면 props 보다 state 상태 관리에 더 많은 머리를 써야 한다는 걸 느꼈다. useMemo 뿐만 아니라 기본적인 state 관리에도 아직 헷갈리는 게 많아서 차근차근 여러 case들을 모아 정리하려고 한다.