React Basic Hooks

useState

• 값이 변경되면 컴포넌트가 렌더링 된다.

useEffect

• 컴포넌트가 Mount, Update, UnMount될 때 실행되는 함수를 의미한다.

// Mount
useEffect(() => {}, []) // 컴포넌트가 처음 렌더링 될 때 함수가 실행된다.

// Update
useEffect(() => {
    const elem = ref.current

    if (elem) { // depth update
      elem.addEventListener('mouseover', handleMouseOver)
      elem.addEventListener('mouseout', handleMouseOut)

      return () => {  // Unmount
        elem.removeEventListener('mouseover')
        elem.removeEventListener('mouseout')
      }
    }
  }, [ref, handleMouseOut, handleMouseOver])
// depth 값이 바뀌면 해당 함수가 실행된다.

// Unmount
useEffect(() => {
	...
	return () => {
		... 
	}
}, []) // 컴포넌트가 사라질 떄 return된 함수가 실행된다.

useRef

• current객체를 통해 DOM을 접근할 수 있다.
• 지역 변수로 사용 가능하다. ⇒ 값이 변경되면 컴포넌트가 렌더링 되지 않는다.

하위 컴포넌트에게 ref prop 전달

• React.forwardRef()함수를 사용하여 부모 컴포넌트의 ref를 prop으로 받을 수 있다.

// App.js
export default const App = () => {
	const inputRef = useRef()

	return (
		<>
			<Input ref={inputRef} />
		</>
	)
}

// Input.js
export default const Input = React.forwardRef((_, ref) => {
	return (
		<input ref={ref} />
	)
})

성능 최적화

리렌더링 조건

1. 현재 컴포넌트에서 상태가 변경될 때
2. 부모 컴포넌트로 받은 prop의 상태가 변경될 때
3. 부모 컴포넌트의 상태가 변경될 때

useMemo

• 계산의 return값을 저장하는 방법이다.
• 결과값의 종속성이 바뀌지 않으면 계속해서 재사용 가능하다.

// 의존성 배열에 있는 값이 업데이트 될 경우 해당 콜백함수가 실행된다.
const result = useMemo(() => sum(n), [n])

❗️React.memo

• 컴포넌트 자체를 저장하는 방법이다.
• 부모 컴포넌트가 전달한 props값의 상태 변화에 따라 리렌더링이 결정된다.
• 컴포넌트서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정

const ChildComponent = **React.memo**(() => {
	return (
		<div>
			<span>Hello World!</span>
		</div>
	))
}

❗️useCallback

• return 값이 아닌 함수 자체를 저장하는 방법이다.
• 컴포넌트가 렌더링 되면 컴포넌트 내에 있던 함수가 새로 생성되면서 리렌더링 되므로 이를 막아줄 필요가 있다.

const onChange = useCallback(() => {
	// function..
}, [])