코드노트

useMemo가 아니라 React.memo? memo는 useMemo만 있는게 아니였나.. 했지만 React.memo도 있었다.. 쉽게말하면 불필요한 컴포넌트 렌더링을 방지하는 훅! 그럼 useMemo와는 어떻게 다를까? React.memo와 useMemo, useCallback을 모두 정리해보려고 한다. useMemo const value = useMemo(() => { return 함수() }, [item]) ------------------------ const value = useMemo(() => { return 함수() }, []) - 첫 번째 인자는 콜백함수를 받는다. 두번 째 인자는 의존성 배열(Dependency)을 받으며, 두번째 인자인 배열의 요소의 값이 업데이트 될 때만 콜백 함수를..

자바스크립트에서도 반복되는 로직들을 함수로 만들어서 사용했듯이 리액트에서도 컴포넌트 단위로 만들다보면 반복되는 로직이 발생한다. input Validation 같은 예를 볼 수 있을 것 같다. 이번에 진행중인 프로젝트중에서 form control 중에서 컴포넌트 안에 사용되는 함수가 많다보니 코드가 너무 길어졌다. 관련하여 custom hook를 적용해보는걸 기록해보려고 한다. 리액트 공식문서에도 form관련 라이브러리를 보여주지만 사용하는 값들을 반환해주는것들이 비슷하다보니 이해하고 넘어가면 도움이 될것 같다. 사용하는 방법은 간단하다. function use만들이름 () { // ... } - use를 앞에 붙여주고 함수이름을 만들면 리액트훅처럼 사용할 수 있다. Custom Hooks 사용전 코드 ..