Page 23 -

2.3 React 속성 사용하기 R E A C T

3
React 컴포넌트의 속성(properties) 은 React 선언형 스타일의 기초라고 할 수 있다. 속성은 엘리먼트
내의 변경할 수 없는 값이라고 생각하자. 속성을 통해 React 엘리먼트가 다양한 모습을 가질 수 있

다. 다음 예제 코드처럼 속성에 새로운 값을 전달해서 링크 URL을 변경할 수 있다.

React.createElement('a', {href: 'http://node.university'})

속성은 컴포넌트 내부에서는 변경할 수 없는 값이라는 점을 기억하자. 부모 컴포넌트는 자식의 생성 시

점에 속성을 할당한다. 자식 엘리먼트에서는 속성을 수정하지 않아야 한다. (여기서 말하는 자식 엘
리먼트는 다른 엘리먼트의 안에 중첩된 엘리먼트를 말한다. 앞서 살펴본 <HelloWorld/>의 <h1/>
같은 경우다.) 예를 들어 다음 예제 코드처럼 속성명(PROPERTY_NAME)에 값(VALUE)을 입력하는 방
식으로 속성을 전달할 수 있다.

<TAG_NAME PROPERTY_NAME=VALUE/>

React의 속성은 HTML 속성을 작성하는 것과 비슷하다. React 속성을 작성하는 목적은 HTML
속성을 작성하는 것도 있지만, 다른 목적도 있다. 엘리먼트의 속성을 코드에서 원하는 대로 사용

하는 것도 가능하다. 속성은 다음과 같은 용도로 쓸 수 있다.

● 일반적인 HTML 요소의 속성: href, title, style, class 등

● React 컴포넌트 클래스의 자바스크립트 코드에서 this.props의 값. 예를 들어 this.props.
PROPERTY_NAME(PROPERTY_NAME을 임의의 값으로 정할 수 있음)

내부적으로 React는 속성 이름(PROPERTY_NAME)을 HTML 표준 속성과 대조한다. 대조한 결과
에 따라, 첫 번째 경우로, 일치하는 HTML 속성이 있으면 해당 엘리먼트의 HTML 속성으로 사
용한다. 입력한 속성의 이름이 PROPERTY_NAME이라면 컴포넌트 클래스 코드에서는 this.props.

PROPERTY_NAME으로 접근할 수도 있다.

3 역주 properties를 줄여서 props라고 부르며, 공식 문서에서도 props로 표기하고 있다(https://reactjs.org/docs/components-and-
props.html).

074

리액트 교과서(본문)최종.indd 74 2018-05-09 오전 12:32:55