[TIL]React Props

오늘 공부한것 & 기억하고 싶은 내용

Props

• properties의 줄임말로 값을 컴포넌트에 넘겨줘야할때 사용한다.
• props는 객체 형태로 전달된다.
• props가 여러개의 경우 비구조화할당으로 전달한다.

const Btn({name, onClick}) => {
	return(
      <button onClick={onClick}>{name}<button />
    )
}

const App(){
  	const [value, setValue] = useState("Submit")
  	const changeValue = () => setValue("Modify")
	return(
      //여기에서의 onClick은 props이기에 작동하지 않는다
      //onClick이벤트 등 속성은 위의 Btn컴포넌트에서 작성해야한다
    	<Btn name="Submit" onClick={changeValue}/> 
    )
}

React.memo

• props가 바뀌면 컴포넌트안에 있는 것들이 전부 리렌더링 되는데 props가 변경되지 않은 값을 리렌더링되지 않게 해주는것

const MemorizedBtn = React.memo(btn)
const App(){
  	const [value, setValue] = useState("Submit")
  	const changeValue = () => setValue("Modify")
	return(
      	//memo를 사용하였기에 onClick으로 props가 변경되는 첫번째만 리레더링
    	<MemorizedBtn name="Submit" onClick={changeValue}/> 
		<MemorizedBtn name="Submit"/> 
    )
}

배운점 & 느낀점

props에 대한 강의를 들으면서 PropType에 대해 배웠는데 타입스크립트와 유사한것 같다.
PropType는 props에 들어갈 String, Number을 미리 작성하여 정의한다는점에서 타입스크립트와 유사하다는것을 느꼈다.

props를 큰 프로젝트에서 사용하게되면 PropsDrilling이라는 단점이 크게 생기는데 이를 해결하기위해선 상태관리 라이브러리를 사용한다고 한다.

상태관리 라이브러리로는 Redux, Recoil, Zustand, Jotai, Mobx 등이 있다 하고 상태관리 라이브러리를 사용할경우 해당 데이터를 필요로하는 컴포넌트안에서만 사용 가능하게 만들 수 있고, 유지보수가 유용하다는 장점이 있다.