Page 17 -

이 절의 앞부분에서 언급한 것처럼, 동일한 DOM 계층에 h1 요소 두 개를 렌더링해야 하는 경우

에 문제가 발생한다. 이 경우 그림 2-3처럼 시각적으로 영향을 끼치지 않는 요소로 두 요소를 감
싸는 방법이 있다. <div> 또는 <span>을 컨테이너로 사용하는 것이 일반적으로 좋은 선택이다.

그림 2-3 형제 요소를 <div> 컨테이너로 감싸 렌더링하는 경우

ReactDOM.render()

div

h1 h1

createElement()에 전달하는 매개변수의 수는 제한이 없다. 두 번째 매개변수 이후의 모든 매

개변수는 자식 엘리먼트가 된다. 그림 2-3의 경우 h1 엘리먼트는 형제 관계다. 즉, 그림 2-4처럼
React 개발자 도구에서 확인해보면 두 엘리먼트가 같은 계층에 위치한다.

그림 2-4 React 개발자 도구에서 중첩된 h1 엘리먼트를 감싼 <div>를 확인할 수 있다.

Note React 개발자 도구
Chrome에 기본 내장되어 있는 요소(Elements) 탭 외에도, React 개발자 도구(React Developer Tools) 확장
프로그램(또는 플러그인)을 설치할 수 있다. Firefox용으로도 제공된다. 그림 2-4의 마지막 탭이 React 개발자 도구
다. React의 렌더링 결과를 자세히 살펴볼 수 있고, 컴포넌트 계층 구조, 이름, 속성(props), 상태(state)도 확인할 수
있다.

React 개발자 도구의 깃허브 저장소는 https://github.com/facebook/react-devtools이다. 확장 프로그램은
Chrome의 경우 http://mng.bz/V276, Firefox의 경우 http://mng.bz/59V9에서 각각 설치할 수 있다.

068

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