Props
Props는 Properties의 약자로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달할 때 사용된다.
Props는 변하지 않는 데이터이다.
1. props 지정
props는 상위 컴포넌트에서 하위 컴포넌트의 속성처럼 사용된다.
<컴포넌트 이름 props이름 = "속성 값">
function App (){
return(
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={"Continue"}/>
</div>
);
}위 코드는 함수형 컴포넌트이다.
Btn의 부모 컴포넌트인 App 컴포넌트 안에서 Btn 컴포넌트의 props인 text와 fontSize값을 지정하여 함께 호출해준다.
2. props 사용
보통 props 값을 사용할 때 props.text, props.fontSize와 같이 props. 키워드를 붙여 사용하는데 아래 코드와 같이 비구조화 할당 문법(구조 분해 문법)을 사용하여 내부 값을 추출할 수 있다.
즉, 함수의 파라미터가 객체일때 값을 비구조화해서 사용하는 방법이다.
function Btn({text,fontSize=12}){ //비구조화 할당
return(
<button
style={{
backgroundColor:"tomato",
color:"white",
padding:"10px 20px",
border:0,
borderRadius:10,
fontSize,
}}>{text}
</button>
);
}
Btn 컴포넌트에서는 부모 컴포넌트에서 지정했던 text와 fontSize 속성 값을 이용할 수 있다.
함수형 컴포넌트인 Btn에서 props 파라미터는 text와 fontSize가 객체 형태로 존재한다.
fontSize는 12로 default값을 지정해줄 수 있다.
3. PropTypes 사용
PropTypes은 props 속성을 체크한다. 필요한 속성이 지정되지 않았거나 data type이 잘못 설정된 경우를 검증할 수 있다.
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
먼저, propTypes를 사용하기 위해 prop-types 라이브러리를 불러온다.
Btn.propsTypes={
text:PropTypes.string.isRequired,
fontSize:PropTypes.number,
};위 코드는 Btn 컴포넌트의 text속성은 반드시 부모 컴포넌트에 필수적으로 필요하며 데이터 타입은 문자열, fontSize 속성은 지정되지 않을 경우 기본 값으로 설정되며 데이터 타입은 숫자형이라는 의미이다.
* propTypes를 사용하면 검증 후 경고 메시지를 확인할 수 있다.
- 전체 코드
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text,fontSize=12}){
return(
<button
onClick={onClick}
style={{
backgroundColor:"tomato",
color:"white",
padding:"10px 20px",
border:0,
borderRadius:10,
fontSize,
}}>{text}
</button>
);
}
Btn.propsTypes={
text:PropTypes.string.isRequired,
fontSize:PropTypes.number,
};
function App (){
return(
<div>
<Btn text="Save Changes" fontSize={18}/>
<Btn text={"Continue"}/>
</div>
);
}
const root=document.getElementById("root");
ReactDOM.render(<App/>,root);
</script>
</html>
'Web > React' 카테고리의 다른 글
| [React] useEffect (0) | 2022.01.29 |
|---|---|
| [React] Component에 스타일 추가하기 (0) | 2022.01.29 |
| [React] React 시작하기 (0) | 2022.01.29 |
| [React] State (0) | 2022.01.27 |
| [React] Component (0) | 2022.01.27 |
댓글