props, state 그리고 redux.... 변수, 인수, 저장소로 전달하고 전달받고.. 어떻게 구분해서 써야 할까..
명확한 성격과 구분은 찾기 어렵거나 개발스러운 경직된 문서가 전부처럼 느껴지는 건 필자의 과장일까?
각설하고 일단 props부터 개단순하게 짚고 넘어가기다.
Title, Body, Button 이란 3개의 컴포넌트로 구성된 Card 라는 컴포넌트를 만들 경우,
먼저 3개의 자식 컴포넌트를 만들고 props 인자를 작성합니다.
// 여기선 사용하기 쉬운 함수형 컴포넌트로 만듭니다. (ES6 기준의 화살표 함수로..)
// React 공식 문서에서 함수형 작성을 권장합니다.
// 아래 예제는 편의상 3개 컴포넌트 파일을 모두 기재했습니다.
// Title.js
import React from 'react';
const Title = (props) => {
return (
<h1 style="color: { props.color }">{ props.title }</h1>
);
};
export default Title;
// Body.js
import React from 'react';
const Body = (props) => {
return (
<div style="color: { props.bgcolor }">
<p>{ props.text }</p>
</div>
);
};
export default Body;
// Button.js
import React from 'react';
const Button = (props) => {
return (
<div>
<button type="button">{ props.name }</button>
</div>
);
};
export default Button;
예제의 함수는 ES6 화살표 함수를 사용했지만 function Title() {.....} 과 같은 함수 형태 사용도 가능합니다.
위 예제엔 아래와 같은 목적이 있습니다.
- Title 컴포넌트는 props를 통해 color 값을 받겠다!
- Body 컴포넌트는 props를 통해 color 와 text 값을 받겠다!
- Button 컴포넌트는 props를 통해 name 값을 받겠다!
이제 부모 컴포넌트인 Card 에서 위의 컴포넌트를 import하고 props 값을 전달하는 코드를 보죠.
// Card.js
import React from 'react';
import Title from './Title';
import Body from './Body';
import Button from './Button';
const App = () => {
return (
<Title title="카드 제목입니다!" color="blue" />
<Body text="카드의 본문 컨텐츠입니다" bgcolor="yellow" />
<Button name="확인" />
);
};
export default App;
App.js 또는 메인 호출 js 내 Card 컴포넌트를 import 하고 <Card />를 삽입 후 실행해 봅니다.
import React from "react";
import Card from './Card';
const App = () => {
return (
<Card />
);
}
export default App;
재사용성을 위한 컴포넌트 기능의 하나인 props는 이 외에도 넘겨 받는 변수 타입을 검증하고 기본값을 설정하며
기타 function 의 인자와 같은 개념입니다.
props는 부모 컴포넌트에서 정의한 데이터, 상태, 함수등을 자식 컴포넌트로 공유(?)하는 전달자 역할을 합니다.
'Front-End > React' 카테고리의 다른 글
| React {02 환경 설치} (0) | 2020.10.29 |
|---|---|
| React {01 개념찾기} (0) | 2020.10.24 |
