Frontend/ReactJS
[Nomad coders] React_Props
by 모너아링
2022. 11. 8.
Props
- 컴포넌트의 요소 값
- 부모 컴포넌트로부터 자식 컴포넌트로 데이터 보내기
//props 사용 전
<html>
function SaveBtn(){
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10
}}>Save Changes</button>;
}
function ConfirmBtn(){
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10
}}>Confirm</button>
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn />
</div>
);
}
</html>
- SaveBtn 컴포넌트와 ConfirmBtn 컴포넌트는 text만 다름
=> 따라서 둘의 부모 컴포넌트인 Btn 컴포넌트 생성
//props 사용 후
<html>
function Btn(props){
return <button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10
}}>{props.text}</button>;
}
function App() {
return (
<div>
<Btn text="Save Changes"/>
<Btn text="Conitnue"/>
</div>
);
}
</html>
- 여기서 props는 Btn({text: "Save Changes"}) 형태로 Btn 함수 인자로 전달됨
- props - {props.text} 대신 {text} - {text} 형태로 사용 가능
props에 여러가지 요소 전달
- props에 담기는 요소는 컴포넌트 내에서 직접적으로 태그에 적용되지 않는다.
=> 따라서 이를 활용하여 적용되게 만들어야 한다.
<html>
<Btn text={value} onClick={changeValue}/>
</html>
//props의 onClick를 event listener로 만들어주려면 다음 형태로 만들어 줘야 함
<button onClick = {onClick}></button>
Memo
- 변경되지 않는 props의 컴포넌트 rerendering 하지 않게 하는 방법
<html>
const MemorizedBtn = React.memo(Btn)
function App() {
...
return (
<div>
<MemorizedBtn text={value} onClick={changeValue}/>
<MemorizedBtn text="Continue" />
</div>
);
}
</html>
Prop Types
- props의 type error를 잡아주기 위해 prop-types를 사용
//설치
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
//text가 string, fontsize가 number가 아니거나 undefined면 에러
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number.isRequired,
}
- default 값은 인자에 = default값으로 적어주면 됨
