[003] 리액트 (React) 배우기 - 함수형 컴포넌트 props 사용

안녕하세요~ totally 개발자입니다.

 

props

 

오늘은 props에 대해 살펴보도록 하겠습니다. props는 properties로 컴포넌트에 값을 전달할 때 사용됩니다. 

 

 

Step 1: 저번 시간의 App.js 파일에서 HelloWorldComponent에 firstName, lastName, age를 부여하여 HelloWorldComponent로 전달합니다.

App.js

 

Step 2: HelloWorldComponent.js 파일을 열고 3번째 줄에 Argument(인자)로 props 변수를 작성하시고 6번째 줄에 중괄호로 감싸서 props.firstName로 App.js에서 부여된 데이터를 가져올 수 있습니다. 

 

 

Step 3: 결과입니다.

 

 

Step 4: 그 다음에는 defaultProps에 대한 사용인데, 함수형 컴포넌트에서는 defaultProps를 간단하게 대체할 수 있기 때문에 굳이 사용하실 일은 없으나 클래스형 컴포넌트에서는 여전히 필요할 수 있기 때문에 알고 계시면 됩니다. 이 defaultProps는 props 데이터의 전달은 없으나 기본값을 넣어주고 싶을 때 사용합니다. 아래 보시면 3번째 줄에 {job = 'Developer'}로 기본값을 넣어준 것을 알 수 있습니다. 물론 기본적으로는 HelloWorldComponent.defaultProps = {} 형태입니다.

 

 

Step 5: 마지막으로 살펴볼 부분은 props.children에 대한 부분이며 쉬운 이해를 위해 HelloWorldCover.js 파일을 새로 만들어주시고 다음처럼 코드를 작성해줍니다. 여기서 주목할 점은 3번째에 {children}형태로 파라미터가 들어가며 6번째도 { children }으로 되어 있는 부분입니다. 

 

HelloWorldCover.js

App.js

여기 App.js에 9, 11번째 줄에 HelloWorldComponent를 HelloWorldCover 태그로 감싸줍니다. 이 때 위에 HelloWorldCover에서 children이 생략되는 경우에는 이 HelloWorldComponent 부분이 출력되지 않는 것을 알 수 있습니다. 이 props.children를 사용해서 여러가지 응용을 해볼 수 있으며 props.children.map, forEach 등 여러 메소드도 제공하고 있습니다.