아래 표는 IterationSample 컴포넌트가 단계별로 어떤 점이 추가(혹은 변경)되었는지에만 집중하여 정리한 표입니다.

단계	추가/변경 내용
1. 기본 버전	- 하드코딩된 <li>만 사용
2. 배열 + map	- 배열(words)을 이용하여 항목을 관리 - map 함수를 통해 반복 렌더링
3. key prop (인덱스 사용)	- 리스트 항목에 key prop 추가 - 인덱스(index)를 key로 사용
4. 고유 id + key	- 각 항목에 고유 id 필드 추가 - key로 id를 사용하여 렌더링

컴포넌트 반복

-정렬되지 않은 목록을 출력하는 컴포넌트를 생성
IterationSample.js 파일을 생성
App.js에 IterationSample 컴포넌트를 추가

[두리아파 트레이닝시즌]
https://www.youtube.com/watch?v=3DcoC8p9az8

두아리파

const [form, setForm] = useState({ message: "", username: "" });

// 객체 비구조화

   const { message, username } = form;

// 전개 연산자를 이용해서 form 객체의 사본을 만들고, 그 사본에 변경을 반영
const newForm = { ...form, [e.target.name]: e.target.value };

// 세터 함수를 이용해서 사본을 저장
setForm(newForm);

객체 비구조화 하기.

const {messgae, username}=form;
const newForm={...form,[e.target.name]:e.target.value}
setForm(newForm);

입력창의 이름을 관리하는 상태 변수를 추가 하자!

const handleChange = e => {
const { name, value } = e.target;
if (name === 'message') {
setMessage(value);
} else if (name === 'username') {
setUsername(value);
}
};
통합된 핸들러 함수 예제 입니다.. 위코드 설명

함수형 컴포넌트에서 이벤트 처리

이벤트 핸들러를 각각 구현한 경우

현빈옆머리 잘 정돈되니 동안으로 보여요
https://blog.naver.com/alldaybunny/223698860980

정리>>>
return
{[키:밸류}; :계산된속성명

그냥쓸땐 obj [키+no]=value;