06. props

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 s26788761@naver.com 으로 문의주세요! 😀

1. props

props는 properties의 준말

컴포넌트를 사용할때 특정 값을 전달해주고 싶을때 사용함!

전달한 props는 객체 형태로 리턴함

값을 전달할 때는,

<Hello name="react"/>

이렇게 사용하면 되고,

값을 전달받은 해당 컴포넌트에서는

function Hello(props) {
  console.log(props); // {name: "react"} 출력
  retur n <div> 안녕하세요 {props.name} </div>;
}

+ props를 입력받을 때, 비구조화 할당 사용해서 편하게 쓸수도 있다!

2. default props

만약 특정 값을 빼먹었을때, 기본적으로 사용할 값

function Hello({ color, name }) {
    return <div style={{
        color
    }}>안녕하세요 {name}</div>;
}

Hello.defaultProps = {
    name: '이름없음'
};

3. children props

컴포넌트 안에 넣는 값을 조회하기 위해 사용하는 것이 props children
(태그와 태그 사이에 넣는 내용을 의미하는게 children!)

function Wrapper({ children }) {
    const style = {
        border: "2px solid black",
        padding: 16
    };

    return <div style={style}>{children}</div>;
    //{children}에 <Hello /> 컴포넌트 두개 들어감!
}

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="gray"/>
    </Wrapper>
  );
}