useState 사용법

불필요한 props 미러링

props 미러링은 상위 컴포넌트의 props를 하위 컴포넌트에서 useState로 감싸 사용하는 경우를 의미한다.

function SayMyName ({name}) {
	const [userName, setUserName] = useState(name);
  return(
  	<h1>{userName}</h1>
  )
}

props 미러링을 통해 컴포넌트의 상태를 관리하게 되면 어떤 문제가 생길까요?

useState의 반환값인 userName을 가지고 UI를 표현하기 때문에 상위 컴포넌트의 name이 변경된다면 userName이 업데이트가 되지 않습니다.

props 미러링이 필요할 때는?

useState로 전달 되는 인자가 첫 렌더링 이후 무시된다는 특성을 이용하여 사용할 수 있습니다.

function SayMyName ({name}){
  const [userName, setUserName] = useState(name);
  const [selection, setSelection] = useState(null)
  if(userName !== name) {
  	setUserName(name);
  }

부모로부터 전달받는 name props의 변경점이 일어났을때만 selection 상태 값을 초기화하기 위해 위와 같이 코드를 작성할 수 있습니다. useEffect를 이용하였을 때 생기는 불필요한 렌더링을 방지할 수 있습니다.