React.props

elinapark·2021년 12월 10일
0

props

컴포넌트에서 외부 데이터를 조회하여 불러오기 위해 사용한다.
props의 데이터는 반드시 상수 값이어야 한다.(변하지 않는 값)

예제를 통해 눈으로 확인해보자.

예제


1. Props 데이터 조회하기

Props
1. Props 라는 데이터를 담을 컴포넌트를 생성한다.
2. 데이터를 작성한다. (예제에서는 style, name 값을 작성)

Children
3. Props에 있는 데이터를 가져다 쓸 컴포넌트를 생성한다
4. 파라미터 값에 props 를 작성한다
5. 리턴될 내용에 style 과 name을 불러온다

const Props = () => {
  const style = {
    border: "10px solid blue",
    padding: "1em",
    color: "steelblue",
    fontWeight: "bold",
  };
  return (
    <div style={style}>
      <Children name="Elina" />
    </div>
  );
};

const Children = (props) => {
  return (
    <div style={props.style}>
      {props.name}
    </div>
  );
};

export default Props;

2. 비구조화 할당으로 props 값 가져오기

  1. 파라미터 값으로 {} 안에 props로 불러올 props의 key를 넣어준다.
  2. props.style ===> style
  3. props.name ===> name
// Props 내용은 위의 예제와 동일하다

const Children = ({ style, name }) => {
  return (
    <div style={style}>
      {name}
    </div>
  );
};

export default Props;
profile
틀린 내용이나, 개선해야 할 사항을 발견하신다면 댓글로 편하게 남겨주세요. 감사합니다.🙇

0개의 댓글