props
리액트에서 데이터를 다루기 위해서는 props 또는 state를 사용한다. 이번 챕터에서는 props 사용법에 대해 알아보겠다. 기본적으로 props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용한다.이때 자식 컴포넌트는 props로 전달된 값을 받을 수만 있으며, 수정은 불가능하다.
먼저 함수형 컴포넌트로 props를 받아오는 방법을 살펴보자. HelloWorldOne 컴포넌트를 생성한 후 부모 컴포넌트에서 전달받을 props 값을 {props.name}과 같은 형식으로 작성한다. 부모 컴포넌트에서 "One 기발자"는 큰 따옴표로 감싸져 있다.
결과화면props는 기본적으로 문자열 값을 갖고 있으며, 만약 다른 데이터 타입을 전달하려면 중괄호({})를 사용한다.
<HelloWorldOne name="One 기발자" age={20} />
ES6에 등장한 객체 안의 데이터에 접근하는 공식을 사용하면 {props.name}은 다음과 같이 수정할 수 있다.
함수형 컴포넌트가 아니라 클래스 컴포넌트로도 props를 사용할 수 있다. 단, 이때는 {this.props.name} 처럼 this를 꼭 함께 입력해야 한다.
결과화면클래스 컴포넌트 또한 ES6 객체 문법을 사용하여 다음과 같이 수정할 수 있다.
자식 컴포넌트에는 name 속성값을 전달받는데, 부모 컴포넌트에서 이를 생략하면 에러가 발생한다. 이때는 기본값을 미리 세팅해 주는 것이 좋은데, 그 때 사용하는 것이 "defaultProps"이다.
결과화면props 는 기본적으로 children 속성을 가지고 있다. children 속성은 컴포넌트 안의 모든 자식을 {props.children}으로 렌더링할 수 있다. 보통 컴포넌트를 작성하면 <Header /> 안에 작성하는데, {props.children}을 사용하면 <Header></Header> 안에 자식 태그(?)를 전달할 수 있다.
마찬가지로 클래스 컴포넌트에서 사용 가능하다. 이때도 this를 함께 표기해야 한다.
children 속성의 특이한 점은 자식 엘리먼트가 복수인 경우 배열로 인식된다. 그래서 배열 안의 데이터 접근 방식을 사용하면 개별 엘리먼트에 접근할 수 있다.
결과화면단, 배열 방식으로 접근할 때 한 가지 주의할 점이 있다. 만약 자식 엘리먼트가 하나라면 this.props.children은 배열이 아니다.
어떠한 화면도 출력되지 않는다.문자열인 자식 엘리먼트가 하나만 있을 때 this.props.children.length를 사용하면 문자열의 수를 반환하므로 버그가 생길 수 있다. 대신 React.Children.count(this.props.children)을 사용하면 자식 엘리먼트의 수를 정확하게 확인할 수 있다.
결과화면참고 자료
ES6에 새롭게 추가된 펼침 연산자(Spread operator)를 사용하면 부모 컴포넌트에 있는 모든 props 속성값을 자식에게 전달할 수 있다.
결과화면