[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 2 | React - props

props

props란 부모가 되는 컴포넌트에서 자식 컴포넌트에게 보내는 데이터이다.

여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용한다.

형제끼리는 직접 전달할 수 없고 부모를 통해서만 전달할 수 있다.

 

props 사용 방법

하위 컴포넌트에서 props

• 함수의 인자에 전달받을 props 이름을 작성한다.
• 상위 컴포넌트에서 text라는 값을 전달받아서 h1 내부에 넣어준다.

 

 

 

상위 컴포넌트에서 props

• 하위 컴포넌트 생성 시 만들어준 props의 이름을 태그의 속성처럼 사용한다.
• Hello, ~라는 문자열이 하위 컴포넌트로 전달된다.

 

 

 

 

컴포넌트를 중복 사용해서 사용할 때, 데이터만 다르게 넘겨줄 수 있다.

 

상위 컴포넌트에서 받은 데이터를 다시 하위 컴포넌트로 전달할 수 있다.

 

props 참고 사항

defaultProps

상위컴포넌트에서 props로 데이터가 전달되지 않았을 때의 default props를 설정한다.

 

props.children

상위 컴포넌트에서 넘겨주는 데이터 중 태그사이의 글자에 표시되는 데이터이다.