props

props는 properties의 약자이다. 컴포넌트의 속성을 지정할 때 사용한다.

따라서, 한 컴포넌트를 이용해서 속성을 매번 다르게 지정할 수 있다. 

그 결과로 코드를 효율성있게 작성할 수 있게 된다.

props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.

 

다시 말해 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값인데,

자식 컴포넌트에서는 props를 받아오기만 하고, 받아 온 props를 직접 수정 할 수 없다.

 

예를 들어, 위와 같은 컴포넌트가 있다고 하자. Subject 컴포넌트의 속성 값을, props를 이용해 변경해보자.

 

이전에 보인 Subject 컴포넌트의 코드를 이용해서 위와 같이 웹 페이지를 만들게 된다.

 

aaa라는 글자를 이전 사진에 나온 웹페이지처럼 제목으로 쓴다고 해서,

Subject 컴포넌트 속성에 title이라고 붙이고 속성 값을 aaa로 설정했다.

그리고 aaa 밑의 react app이라는 글자는 소제목으로 붙이고 싶어서 sub라는 이름의 속성을 줬다.

 

컴포넌트 내의 코드는 위와 같이 작성한다. 자신이 받아온 값을 this 키워드를 이용해서, props의 title 속성 값에 접근한다.

sub 속성 값도 마찬가지로 this 키워드를 이용해서 접근한다. 

이와 같이 props 속성 값은 this.props.속성이름으로 접근한다.

여기서는 부모 컴포넌트가 App이고 자식 컴포넌트가 Subject가 된다.

부모 컴포넌트에서 전달하는 props가 바뀌면 자동으로 업데이트되기 때문에, App 컴포넌트에서 바뀐 값은 바로 Subject에 반영된다.

 

참조

• 생활코딩 React(인프런, YouTube)
• 벨로퍼트와 함께하는 모던 리액트(react.vlpt.us/basic/05-props.html)