📖 React Props란?

1. Prop란?

• React에서는 부모 컴포넌트가 자식 컴퍼넌트들에게 마치 함수의 인수를 전달하듯이 원하는 값을 전달해주는게 가능
  → 이때 컴퍼넌트에 전달된 값을 Props라고 한다.(properties의 줄임말)
• 컴포넌트를 함수 호출하듯이 전달하는 값에 따라 각각 다른 UI를 렌더링할 수 있다.

2. 구현해보기

1. Button이 담겨있는 컴포넌트 jsx 파일 만들기

const Button = () => {
  return <button>클릭</button>;
};
export default Button;

2. Button이 담겨있는 컴포넌트를 App.jsx에 선언하여 가져오기

import Button from "./components/button";
function App() {
  return (
    <>
      <Button />
      <Button />
      <Button />
    </>
  );
}

3. Button에 text 값 넣기

function App() {
  return (
    <>
      <Button text={"메일"}  color={"red"}/>
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

const Button = (props) => {
  console.log(props);
  return <button>클릭</button>;
};

→ text의 값을 받으려면 컴포넌트에 매개변수(props)를 입력해줘야한다.

4. 콘솔 확인하기

→ 값이 객체 형태로 담겨서 전달된다.
→ Props 값들이 properties로 하나씩 들어가있다.

3. Props 사용 방법

1. default Props 사용 (현재 지원하지않음)

const Button = (props) => {
  console.log(props);
  return (
    <button style={{ color: props.color }}>
      {props.text} - {props.color.toUpperCase()}
    </button>
  );
};

---

function App() {
return (
<>
<Button text={"메일"} color={"red"} />
<Button text={"카페"} />
<Button text={"블로그"} />
</>
);
}

위와 같이 작성을 하면 오류가 발생한다
→ 이유 : 카페, 블로그에는 color 값이 없기 때문이다.(Undefined)
→ 해결 방안 : 자동으로 설정될 기본 값을 설정

>```
Button.defaultProps = {
  color: "black",
};

→ 모든 버튼의 defualt 값은 black으로 지정

1-1. default Props 을 대체할 방법

const Button = ({ text = "기본 텍스트", color = "black" }) => {
  console.log(text, color);
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
    </button>
  );
};

→ default 값을 매개변수와 함께 작성

2. 객체의 구조 분해 할당 문법을 이용

• 구조 분해 할당 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
• Button 컴포넌트에서 매개변수를 props가 아니라 text, color로 지정이 가능하다

const Button = ({ text, color }) => {
  console.log(text, color);
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
    </button>
  );
};

3.props로 여러 개의 값을 전달할 경우

function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };
  return (
    <>
      <Button {...buttonProps} />
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

++ 강의에서는 오류없이 잘 났지만 나는 text, color 값만 나오고 a,b,c 값은 나오지않아서

그냥 Button 컴포넌트에 매개변수(…rest)를 추가하여 값이 나오도록 하였다.

4. Children Props

• <Button></Button> 으로 셀프 크로징하지 않고 그 안에 자식 태그나 컴포너트를 입력할 수 있다.
• JavaScript 값뿐만 아니라 HTML 요소나 React 컴포넌트도 전달 가능

  function App() {
    const buttonProps = {
      text: "메일",
      color: "red",
    };
    return (
      <>
        <Button {...buttonProps} />
        <Button text={"카페"} />
        <Button text={"블로그"}>
          <Header />
        </Button>
      </>
    );
  }
  --
  const Button = ({ text = "기본 텍스트", color = "black", children }) => {
    console.log(text, color);
    return (
      <button style={{ color: color }}>
        {text} - {color.toUpperCase()}
        {children}
      </button>
    );
  };

→ Header는 Button의 자식이므로 Button 컴포넌트 매개변수에 children 추가
→ children 값을 출력