알랑깔랑 React 정리

PROPS ?

App이라는 Component안에 <Modal> 이라는 Component를 만들었다

!! 여기서 App은 부모 Component, Modal은 자식 Component [부모자식관계]

🤔 자식 Component가 부모 Component 안에 있던 state를 쓰고 싶다면 ❓

❌ { 부모에 있던 state 이름}

⭕️ props라는 문법으로 state를 전송한 뒤에 { props.state이름 }

HOW TO USE 'PROPS'

매우 간단하지만 이해하려고 달려들면 힘들 수 있습니다. 대충 외워 쓰자는 말

1. <자식 Component 전송할 이름 = {state명}> 이라고 먼저 사용한다

2. 자식 Component 선언하는 function 안에 파라미터를 하나 만들어 주면 된다

EX

function App() {
  let [state, setState] = useState([...some]);
  return (
    <div>
      ...
      <Modal></Modal> {/* ❌ */}
    </div>
  );
}

function Modal() {
  //Modal()안 파라미터가 비어있으므로 ❌
  return (
    <div className="modal">
      <h2>제목 {some[0]}</h2> {/* ❌ */}
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

function App() {
  let [state, setState] = useState([...some]);
  return (
    <div>
      ...
      <Modal someName={state}></Modal> {/* ⭕️ */}
    </div>
  );
}

function Modal(props) {
  // ⭕️
  return (
    <div className="modal">
      <h2>제목 {props.some[0]}</h2> {/* ⭕️ */}
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

TMI

1. props는 <Modal 이런거={이런거} 저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능
2. props라는 파라미터엔 전송한 모든 props 데이터가 들어가있다.
   props.글제목 이런 식으로 원하는 것만 꺼내쓰면됨
3. props 전송할 땐 꼭 {} 중괄호로 전송해야하는건 아님
   <Modal 전송할이름={변수명}> = <Modal 전송할이름 ="변수명">

Props Types

잘못된 PROPS를 받아올 경우 에러를 띄워주는 멋진 친구 -> PROPTYPES

// PropTypes CDN
script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js"

// fontSize: fontSize 👉 이름이 같기 때문에 그냥 fontSize 로 적어줄 수 있음
// propTypes 👉 내가 어떤 타입이고 어떤 모양인 prop을 받고 있는지 체크해줌
// Ex
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
};
// 👉 text가 string이 아니면 오류를 console에서 보여줌

function Btn({ text, fontSize = 16 })
// 👉 정의되지 않은 변수에 관한 기본값 주는 것도 가능

Sae Eleisa Tera Vi