[React] 커스텀 훅 및 useCallback

Custom hook을 사용하여 hook을 custom 할 수 있다

Single Page Application에서 쓰이는 <form> tag의 경우 submit 동작 시 e.preventDefault()를 필수로 추가해야한다.

 

useCallback은 사용시 함수를 기억하기에 배열 요소에 바뀌는 값들을 꼭 추가해줘야 한다.

 - 매번 함수 component가 render시 함수가 새로 생성되며 함수를 포함한 자식 component도 계속해서 render 됨

 - re-render가 발생해도 실제로 화면을 계속 그리는건 아니지만 비교검사를 하기 때문에 사용자 경험에 영향을 미침

 - useCallback 배열 요소에는 함수를 기준으로 외부 변수에서 바뀌는 값이면 적어주고 내부 변수일 경우는 적지 않아도 됨 / 순수함수일 경우는 적지 않아도 됨

 

1. 부모에서 선언된 useCallback이 자식으로 전달되는 건 맞습니다.

2. 함수가 실행된다고 해서 자식이 렌더되진 않습니다. 부모의 state값을 업데이트하면서 부모 컴포넌트가 리렌더링되고, 부모가 리렌더링되면 자식 컴포넌트도 리렌더링되는 겁니다.

3. 부모 때문에 자식이 리렌더링될 때 자식 컴포넌트가 React.memo로 감싸져있는 경우, 부모로부터 전달받은 useCallback을 같은 값으로 판단해서 자식을 리렌더링시키지 않습니다.