• 오늘 뭐했지 ?

Lifting state up

<aside> 👩‍🌾 상태 끌어올리기는 서로 다른 컴포넌트의 상태가 함께 변경되어야 할 때 사용

</aside>

• 상태는 자신 안에서만 사용가능 컴포넌트의 상태는 서로 독립적 😎
• 형제(멀리 있는)컴포넌트와 공유할 수 없음

➡️ 가장 가까운 상위 컴포넌트로 상태를 끌어올려 속성으로 상태 전달

1️⃣ 자식컴포넌트로 상태를 변경하는 함수 전달

2️⃣ 부모 컴포넌트에 상태 추가해 활성화된 패널 추적

• 코드 보기 🥰

FormControl

입력영역 ⇒ <input>, <textarea>, <select>, <option>

<aside> 👩‍🌾

폼 전체를 리액트로 다루면 상태가 바뀔때마다 리 렌더링이 됨 ▶️  변경되지 않는 것들과 변경될 것을 분리

</aside>

폼 – React

👻 멀티 체크박스 폼 과제..

• 코드보기🥱

🪝 useId

<aside> 👩‍🌾 React에서 고유한 ID를 생성하기 위해 사용되는 훅

</aside>

import { useId } from 'react';
function FormInput({label, placeholder,value, onChange}){
	const id= useId();
	return(<div>
		<input id={id}>
	</div>)
}