# Props

📌 props

: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법.

필요한 상황 : 재사용할 컴포넌트 만들기

ex) 중복되는 디자인의 여러 버튼 생성(저장 버튼, 삭제 버튼, 수정 버튼 등)
컴포넌트를 하나만 만들고 props를 통해 몇몇 요소만 바꾸어 재사용할 수 있다.

사용 방법

• 다르게 설정한 property를 컴포넌트의 인자(props)로 넘겨줌.(텍스트, Boolean, 함수 등)
• props는 유일한 인자로, 받은 값들을 object에 넣어둔다.
• 받은 값은 props.내가 설정한 key 로 꺼낼 수 있다.
• props는 자동 실행되지 않기 때문에 직접 return 안에 설정해야 함.

function Btn(props){
  return(
    <button style = {{
    	backgroundColor : "tomato",
    	color : "white",
    	padding : "10px 20px",
  	    borderRadius : 10,
    }}>
    {props.text}
    </button>
  )
}
function App(){
  return(
    <div>
    	<Btn text="save" lalala="saving"/> // 마음대로 설정
    	<Btn text="delete" lalala="deleting"/>
    </div>
  )
}

더 좋은 방법은 props 대신 { }로 값을 받는 것.(ES6)

• props가 오브젝트이기 때문에 이렇게 해도 된다.
• 기본값도 설정해줄 수 있다.

function Btn({text = "button", info}){
  return(
    <button style = {{
    	backgroundColor : info ? "blue" : "tomato", // 활용
    	color : "white",
    	padding : "10px 20px",
  	    borderRadius : 10,
    }}>
    {text}
    </button>
  )
}
function App(){
  return(
    <div>
    	<Btn text="save" info={true}/> // 마음대로 설정
    	<Btn text="delete" info={false}/>
    </div>
  )
}

함수 넣어보기

props로 함수도 넘겨줄 수 있다.

function Btn({text, info, click}){
  return(
    <button style = {{
    	backgroundColor : info ? "blue" : "tomato", // 활용
    	color : "white",
    	padding : "10px 20px",
  	    borderRadius : 10,
    }} onClick = {click}>
    {text}
    </button>
  )
}
function App(){
  const [value, setValue] = React.useState("Save");
  const changeValue = () => setValue("Revert Changes");
  return(
    <div>
    	<Btn text={value} info={true} click={changeValue}/>
    	<Btn text="delete" info={false}/>
    </div>
  )
}

📌 Memo(Memorize)

: 특정 컴포넌트가 다시 렌더링 되는 것을 막을 때 사용.
ex. props 변경사항 없으면 다시 렌더링 할 필요 없음.

• 장점 : 변경사항이 없는 것들도 다시 렌더링 되면 어플리케이션이 느려지는 원인이 될 수도 있는데 그걸 방지할 수 있다.

function Btn({text, info, click}){
  return(
    <button style = {{
    	backgroundColor : info ? "blue" : "tomato", // 활용
    	color : "white",
    	padding : "10px 20px",
  	    borderRadius : 10,
    }} onClick = {click}>
    {text}
    </button>
  )
}
const MemorizeBtn = React.memo(Btn); // memo
function App(){
  const [value, setValue] = React.useState("Save");
  const changeValue = () => setValue("Revert Changes");
  return(
    <div>
    	<MemorizeBtn text={value} info={true} click={changeValue}/>
    	<MemorizeBtn text="delete" info={false}/> // 변경사항 없어서 다시 렌더링 안 됨.
    </div>
  )
}

📌 PropTypes

: 어떤 타입의 prop을 받고 있는지 체크해줌.

• 값을 넘길 때 string, number, function 등의 타입을 잘못 적는 실수를 하면 에러메세지로 알려주도록.
• 꼭 필요할 때는 isRequired를 붙여줌.
  
  

사용 방법

step 1. install 하기

npm i prop-types

step 2. 상단에 import 하기

import PropTypes from "prop-types”

예제

<Btn text={14} fontSize={"2"}/>

Btn.propTypes = {
	text : PropTypes.string.isRequired,
    fontSize : PropTypes.number,
}

CSS 적용하는 법

아무이름.module.css

예제)
Button.module.css

.btn{
	color : white;
}

Button.js

import styles from "./Button.module.css"
  
function Button(){
	return <button className={styles.btn}>hello</button>
}