[React] props

props란?

상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.

부모 > 자식 state 전송하는법

1. <자식컴포넌트 작명={state이름}>
2. props 파라미터 함수안 매개변수로 등록 후 {props.작명} 사용

• 컴포넌트에 전달하는 props는 객체(object) 형태이다.
  따라서 아래 코드처럼 사용도 가능하다.

function Say() {
  const props = {
    name: "walli"
  };
  return <Hello {...props} />;
}

• 작명은 state이름과 동일하게 사용 권장
• 자식>부모나 형제관계끼리는 전송 불가
• props로 스타일, 일반 문자도 전송 가능
  (ex. color='orange' 로 전송 > style={{background : props.color}} 으로 사용
• { }의 사용 여부: 전달방법에 차이가 있다고는 하나..이해를 못한건지 큰 차이는 없는 듯하다. 대중적으로는 {}로 쓰는듯하다.

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회하면 된다.

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>  //컴포넌트 사이에 value
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>  //조회 방법
    </div>
  );
};