React - 컴포넌트 분리와 props

출처
https://youtu.be/6YZhSvRqddw (ZeroCho TV)
https://youtu.be/JoCB5BDxZTE (얼쑤 ALLSSU)

먼저 한 페이지에 작성한 후에
반복문 단위로 쪼개서 컴포넌트 만들기
컴포넌트에서 쓸 데이터는 props로 넘길 수 있음
컴포넌트 내에서 쓰려면 ‘props.넘겨준 이름’으로 사용

원래 코드

1. 데이터 배열 먼저 쪼개주기

2. 처음엔 반복문 단위로 쪼개주면 좋음

3. 데이터는 props로 넘겨주기

---

1-1. form을 컴포넌트로 분리

1-2. 컴포넌트에서 사용할 데이터를 props로 받기

• InsertTodo함수, input변수, changeText함수를 인자로 보내줌
• 함수의 경우 보내주는 props이름을 변경해서 거기에 넣어줌
  ex)
  부모에서 자식컴포넌트로 보낼 때 : handleSubmit={insertTodo}
  자식 컴포넌트에서 받을 때 : props.handleSubmit
  
  

2-1. 반복문 코드를 컴포넌트로 분리

2-2. props로 받을 수 있도록 변경

자식 컴포넌트

부모 컴포넌트

• 함수에 인자를 담아야하는 경우 화살표 함수로 처리
• Key값도 넘겨주기