Page 22 -

그림 2-6 HelloWorld 컴포넌트 클래스로 생성한 엘리먼트를 렌더링한 결과
2

React 첫걸음

아마도 리팩토링으로 얻은 것이 많지 않다고 생각할 수도 있겠다. 그렇지만 만약 Hello World를
여러 번 노출해야 한다면 어떨까? HelloWorld 컴포넌트를 여러 번 재사용하고 <div> 컨테이너로
감싸면 이 문제를 해결할 수 있다.

...
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld),
React.createElement(HelloWorld),
React.createElement(HelloWorld)
),
document.getElementById('content')
)

이것이 컴포넌트 재사용성의 힘이다! 개발 속도를 높여주고 버그도 줄일 수 있다. 컴포넌트가 제
공하는 라이프사이클(lifecycle) 이벤트, 상태(state), DOM 이벤트 등 여러 가지 기능을 활용하면 독
립적이면서도 애플리케이션의 다른 영역과 함께 잘 동작하는 컴포넌트를 만들 수 있다. 이에 대해

서는 뒤에서 더 자세히 설명하겠다.

HelloWorld 엘리먼트가 모두 똑같은 것이 다소 아쉽다. 속성을 입력해서 내용이나 동작을 변경할
수 있다면 어떨까? 이제 속성을 만날 차례다.

073

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