[React] 컴포넌트의 Props 란?

1. Props 란?

리액트의 props는

1. <Header></Header>

2. <Header title="WEB" sub="WorldWideWeb"></Header>

1번 처럼만 사용가능했던 Header컴포넌트를, 2번 방법처럼 App컴포넌트에서 값을 직접 정의해 사용할 수 없을까? 하는 고민에서 등장한 해법이다.

마치 HTML 태그의 속성처럼, 한 컴포넌트의 요소에 props value를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있는 것이다.

즉, props란 컴포넌트 끼리 값을 전달하는 수단이다.

2. 사용법

jsx 문법으로 아래처럼 사용한다.

{this.props.value}

value 는 props의 이름이라고 생각하면 된다. 다른 컴포넌트에서 value에 값을 넣어 사용한다.

3. 참고

• Props를 통해 데이터 전달하기