[React] Props

props는 리액트에서 가장 중요한 개념중 하나입니다.

 

리액트에서 컴포넌트끼리 데이터를 주고 받는 방법인데. props를 사용해보며 정리해 보았습니다.

 

 

 

 

/ 문법 정의 & 기본형식

 

 

전에 작성해둔 모달창에 state를 활용하여 글 제목을 넣으려고 했더니 에러메시지가 나옵니다.

 

title이 정의 되어 있지 않다고 합니다. 

 

이렇게 부모 컴포넌트의 state를 가져다 쓰려고하니까 에러가 나오는 모습을 확인할 수 있는데 , 

 

이 부분을 고쳐줄 수 있는 것이 props입니다.

 

props는 자식 컴포넌트가 사용되는 태그 안에서 부모컴포넌트의 state나 정보를 전달 해주면 됩니다.

 

위 예시로 보았을 때  <Modal props = { 넘기고싶은 state } 가 됩니다.

( 보통은 props와 넘기고싶은 state에다가   넘겨줄 state이름으로 똑같이 씁니다.)

 

 

이제 데이터를 넘겨받은 자식 컴포넌트가 데이터를 활용하는 것만 남았네요.

 

데이터는 자식 컴포넌트의 파라미터에 props라고입력한 후, 

 

props.사용할 데이터를 입력하면 됩니다.

 

 

 

 

/추가로 알아둘 점

 

props는 한개만 넣을수 있는게 아니라 몇 개든 넣을 수 있고 굳이 state만 넣어서 사용하는 것이 아니라 여러 데이터를 넘겨 줄 수 있습니다.

 

 

이렇게 문자열, 숫자, 논리형 전부 보낼 수 있습니다  문자열일경우 ""에 붙여서  보내야합니다.

 

이렇게 하면 사용은 함수의 파라미터처럼 사용할 수 있습니다.

 

글자색을 props를 활용해 붉은색으로 만들었습니다.

 

 

 

/주의해야할 점

 

props는 부모가 자식에게만 데이터를 전달 해 줄 수 있습니다.

 

자식에서 부모로 props를 전달할 수 없고 형제끼리 props를 전달 할 수 없습니다.

 

 

 

/ 요약

 

1. props는 부모가 자식에게서 데이터를 넘겨주는 것이다

 

2.자식 컴포넌트에서 props = { 넘겨줄 데이터 }로 전송가능 자식은 파라미터에다가 props를 넣어서 props.데이터 로 사용가능

 

3. props는 부모 컴포넌트가 자식에게만 전달 할 수 있다.