부모 컴포넌트 데이터 자식 컴포넌트로 넘겨주기

1. 자식 컴포넌트에 넘겨줄 데이터 식별하기
   • 콘솔에 내가 필요한게 나올때까지 찍어본다.

const [ text , setText ] = React.useState({name : ["정혜원","정혜인"]});
----------->
// 위 데이터 중 name 배열의 요소만 넘길것이다.
// 데이터 식별과정 : console.log(text.name) 

2. 부모 컴포넌트에 자식 컴포넌트를 임포트 한 후, 리턴값에 자식컴포넌트 붙여주고 넘겨줄 데이터 끌어오기
   • <자식컴포넌트이름 데이터이름 ={끌어올 데이터}/>

return(
<div>
   <InputText value = {text.name}/> 
</div>
	);
-------------->
// 끌어올 자식 컴포넌트 = InputText(얘 임포트 되어있어야 한다.)
// 끌어올 데이터 = text.name
// 데이터 이름 = value

3. 자식컴포넌트에 props 끌어오기
   • 프롭스자리에 {데이터 이름}
   • const 변수 = 데이터 이름;

const InputText = ({value}) => {
    const my_list = value;
	return(
     	    <div>
              {my_list.map((list, index) => {
                return <MyList key={index}>{list}</MyList>;
       		 })}
     	    </div>
    );
};
---------------->
// props자리 = {value}
// 배열의 내장함수(map)에는 리턴값이 있어야 한다.
// 내장함수 매개변수에 부모 컴포넌트의 데이터를 넘겨줄 수 있다.
   내장함수 매개변수 = value(부모 컴포넌트의 데이터)

인풋값 끌어와서 화면에 추가하기

- 화면에 무언가 추가한다 = state를 변경시킨다.
1. 화면에 추가하고싶은 input값 ref로 끌어오기
2. input값에 onChange={}를 이용해서 input값을 잘 추출했는지 확인
3. setState() 를 이용해 input추출값 넣어주기
4. state 변경함수 실행해주기