Props

• properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소
• 컴포넌트끼리 값을 전달하는 수단! props는 객체로 넘어오게 된다.
• 상위 컴포넌트에서 하위 컴포넌트로 전달가능하다. (단방향 데이터 흐름)
• props라는 객체로 넘어온다.

▶️ 함수형 컴포넌트 props

• 부모 컴포넌트에서 데이터를 props로 전달한다. 이 props는 컴포넌트에서 함수의 매개변수로 받아진다. 그리고 JSX 내부에서 {} 기호로 감싸서 사용할 수 있다.
• 부모컴포넌트에서 데이터를 보내준다. 자식컴포넌트에서는 그 데이터를 받아서 사용한다. 자식은 틀만 잡아놓고 부모가 보내준걸 원하는 위치에 넣어서 사용하는걸로 생각!
• 이 때 실제로 넘어오는 속성값의 이름을 사용해야한다! (받아서 사용할 때도 동일한 속성이름으로 받아서 사용)

//부모 컴포넌트에서 props 전달해준다. 
//속성 = 속성값 을 작성해준다.
//이 경우 title, contnet, number 라는 속성이름으로 보내지게 된다.
<FunPropsEx title="sesac" content="hello world" number={5} />

//자식 컴포넌트에서 props를 전달받아서 사용한다. 
//이 경우 props를 구조분해해서 가져온다. 
//꼭 실제로 넘어오는 속성이름을 사용해야 한다!

function FunPropsEx({ title, content, number }) {
  return (
    <>
      <div>함수형 컴포넌트를 이용 (Props) </div>
      <div>
        제목은 {title}, 내용은 {content}, 숫자는 {number}
      </div>
    </>
  );
}

▶️ props 가져오는 법 _ 1) 매개변수 자체로 가져오기

//매개변수 props 안에 담겨있는 속성들을 사용하는 것이기 때문에
//{ } 안에서 사용할 때 {props.속성이름} 형식으로 작성해준다. 

function FunPropsEx(props) {
  return (
    <>
      <div>함수형 컴포넌트를 이용 (Props) </div>
      <div>
        제목은 {props.title}, 내용은 {props.content}
      </div>
    </>
  );
}

▶️ props 가져오는 법 _ 2) 컴포넌트 내에서 구조분해

//매개변수 props자체로 받아오되
//각 속성들을 사용하기 위해 컴포넌트 내에서 구조분해 해준다.
//이 때는 구조분해를 했기 때문에 {속성이름} 자체로 사용이 가능하다.

function FunPropsEx(props) {
  const { title, content } = props;
  return (
    <>
      <div>함수형 컴포넌트를 이용 (Props) </div>
      <div>
        제목은 {title}, 내용은 {content}
      </div>
    </>
  );
}

▶️ props 가져오는 법 _ 3) props를 받아올 때 부터 구조분해

//이 때는 꼭! 부모컴포넌트에서 넘겨주는 실제 속성 이름을 사용해야 한다!

function FunPropsEx({ title, content }) {
  return (
    <>
      <div>함수형 컴포넌트를 이용 (Props) </div>
      <div>
        제목은 {title}, 내용은 {content}
      </div>
    </>
  );
}

▶️ props 가져오는 법 _ 4) proptypes를 이용한 명시, defaultProps

//예상과 다른 props가 넘어와도 오류 콘솔이 나지 않기 때문에 코드가 길어질수록 오류를 찾기 힘들 수 있다.
//유연한 js의 특징으로 인해 실행은 되더라도 예기치 못한 오류가 발생할 수 있다.

//그러니 proptype를 이용해서 어떤 props가 넘어올지 명시해준다!
//PropTypes를 import해주어야 한다.

import PropTypes from "prop-types";

function FunPropsEx({ title, content, number }) {
  return (
    <>
      <div>함수형 컴포넌트를 이용 (Props) </div>
      <div>
        제목은 {title}, 내용은 {content}, 숫자는 {number}
      </div>
    </>
  );
}

//props가 안넘어오더라도 기본값으로 보여줄 props를 설정해준다.
//데이터 누락을 방지.
FunPropsEx.defaultProps = {
  title: "이렇게사용",
};

//proptypes를 이용해 넘어올 props의 데이터 형식을 세부적으로 지정해준다.
FunPropsEx.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string.isRequired,
  number: PropTypes.number,
};

▶️ props 가져오는 법 _ 5) props.children

• 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열이 {props.children}에 담기게 된다.

//부모 컴포넌트

<FunPropsEx title="sesac">
여기에 작성되는 내용들이 children이다! 내부에 작성된 모든 내용들. 여기서 작성한 내용을 자식 컴포넌트가 사용하는 것.
<FunPropsEx/>

//자식 컴포넌트

function FunPropsEx(props) {
  return (
    <>
       <div>{props.children}</div>
    </>
  );
}

▶️ 클래스형 컴포넌트 props

• 잘 사용하지 않기 때문에 알고만 있자.
• 함수형과 비슷한 형식이다. 차이점은 render()를 사용하는 것.
• 그리고 import { Component } from "react"; 를 해준다.
  • React 자체에 있는 Component 속성을 상속받아 사용한다.

class ClassPropsEx extends Component {
  render() {
    return (
      <>
        <div>클래스형 컴포넌트를 이용 (Props) </div>
        <div>
          제목은 {this.props.title}, 내용은 {this.props.content}, 숫자는 {""}
        </div>
      </>
    );
  }
}

ClassPropsEx.defaultProps = {
  title: "코딩온",
};

ClassPropsEx.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string.isRequired,
  number: PropTypes.number,
};