12.10(일)

'use client'는 왜 하는가?

서버 컴포넌트가 기본값이므로 use client 지시문을 모듈의 시작부분에 정의하거나 가져오지 않는 한 모든 컴포넌트는 서버 컴포넌트 모듈 그래프의 일부이다.
'use client' 를 파일의 최상단(import 보다 위, 첫 번째 줄)에 입력하면, 하위 구성요소를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다.
즉, 모든 파일에서 'use client' 를 선언하지 않아도, 진입점에서 한 번만 정의해주면 된다.

useCallback을 사용하는데 왜하는가?(한마디로 새 함수 생성 안하려고)

react의 성능 최적화를 위해 사용. 콜백함수를 메모이제이션
which means, 이전 렌더 사이에 동일한 함수가 계속 사용되도록 보장함으로써 불필요한 함수 생성을 방지함.( 그럼 무조건 쓰는게 좋은거 아님?)
특히 자식 컴포넌트에게 콜백 함ㅅ후르 전달하는 경우에 유용.
기본적으로, Reactg는 각 렌더링 시에 함수를 새로 생성함.
이것은 일반적으로 렌더링에는 영향을 미치지 않지만, 자식 컴포넌트에게 전달되는 함수가 변경될 때마다 자식 컴포넌트는 다리 렌더링 됨.(전달 되는 함수가 변경된다고..?)뭔말이지?
-> React에서 함수 컴포넌트 내에서 함수를 선언하면, 그 함수는 매 렌더링 때마다 새로운 인스턴스가 생성됩니다. 이것은 JavaScript의 특성으로, 함수는 객체이기 때문입니다. 그래서 매 렌더링 때마다 함수가 다시 만들어지면, 함수의 참조가 변경되어 이전의 함수와 현재의 함수가 서로 다르다고 인식됩니다.

  // useCallback을 사용한 장점
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 변경될 때만 함수를 새로 생성

useCallback은 두 번째 인자로 전달된 의존성 배열이 변경될 때만 함수를 새로 생성합니다. 이 경우 count가 의존성으로 지정되어 있으므로, count가 변경될 때만 새로운 함수를 생성합니다.

tailwind css에 대하여.- css파일이 따로 필요없고 tsx inline 스타일로 한 번에 처리하는.
장점 : 클래스 작명 필요없고 개발자간의 소통이 쉬워짐. 통일 되어 있으니까.
단점 : 자주 쓰는 것들을 익힌 상태로 해야하고 필요할때마다 찾으면 됨.

타입스크립트

'use client'

interface MenuItemProps {
  onClick: () => void
  label: string
}

const MenuItem: React.FC<MenuItemProps> = ({ onClick, label }) => {
  return (
    <div
      className='
				px-4
				py-3
				hover:bg-neutral-100
				transition
				font-semibold
			'
    >
      {label}
    </div>
  )
}

export default MenuItem