리액트 - props로 데이터 전달하기 w.스프레드 연산자

 

 

자 오랜만에 돌아온 리액트 ! 

 

대체 언제까지 이 강의를 듣고 안듣고 또 다시 도전할지는 모르겠네요 

그래도 화이팅 ! 

리액트 잘 하고 싶다고 ㅜㅜ 

 

 

 

props에 관해서 봐봅시다. 

 

 

 

 

 

=> text라는 props의 값을 "메일"으로 준다. 

 

 

 

props의 값을 console창에 출력한다.

 

 

 

 

잘 출력된다. 

=> app.jsx(부모컴포넌트)에 넣은 값이 자식 컴포넌트로 전달

=> 자식 컴포넌트에 매개변수로 전달이 된다 

 

 

 

=--------------------------------------------------------------------------------------------------------------

 

 

props가 두개 이상이고 기본값을 주고 싶을 때 => 구조분해 할당 

 

props가 text, color 두개이다.

 

 

 

 

text, color 이 값으로 구조분해 할당 받기 ! 

color 값은 black 이 기본값이 된다. 

 

 

 

---

 

 

근데 나는 props 줄게 너무 많다 ? 

그러면 객체로 만들어서 전달해줍니다. 

 

 

buttonProps라는 객체를 만들어 전달하고 싶은 값들을 전부 적어주고요 

{...buttonProps} 를 넣어 저 객체를 props로 전달해줍니다. 

=> 이 ... 을 스프레드 연산자 라고 합니다.