리액트 기초4 - props, JSX주의사항

JSX 주의 사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
if문이나 for문 사용 X
2. 숫자, 문자, 배열 값만 렌더링 된다.
null, undefined는 X
4. 객체는 렌더링 되지 않는다.
ex) {obj} 그래서 {obj.name}이런식으로
문자 값이나 숫자 값으로 랜더링해야한다.
5. 최상위 태그는 반드시 하나여야만 한다.

Props

App.jsx (부모 컴포넌트)
Button.jsx (자식 컴포넌트)

// App.jsx 파일 내용
function App() {
  return (
    <>
      <Header />
      <Button text={"메일"} />
      <Main />
      <Footer />
    </>
  );
}

// Button.jsx파일 내용
const Button = (props) => {
  console.log(props);
  return (
    <>
      <button> 버튼 </button>
    </>
  );
};

App.jsx(부모)에 선언된
<Button text={"메일"}/> 에 props를 전달

• text라는 프롭스로 "메일"이라는 값 전달

Button.jsx(자식)에
const Button = (props) => {
console.log(props);

• props라는 매개변수로 부모 컴포넌트로부터 값 전달받음
  객체 형태로 담겨서 전달됨
  

부모에게 선언된 자식 컴포넌트에게
text = {"mail"} 이렇게 props를 전달해주면 객체로 묶여서
자식 컴포넌트의 매개변수로 제공이 된다.해당 객체 내에는 프로퍼티로 들어있다.

---

color = {"red"}까지 추가

부모

---

자식

---

결과
props에 전달된 값이 잘 출력되는걸 확인할 수 있다.

---

이런식으로 style에 props의 프로퍼티를 사용할수도 있다.

---

이제 Button.jsx 파일에서 (props)로 받아오는것을
객체의 구조분해 할당 문법을 이용하여
({color,text}) 이렇게도 가능하다.

---

프롭스로 여러개의 값을 전달해야 한다면
...spread 연산자를 이용할 수 있음

---

props는 html이나 react 컴포넌트도 전달할 수 있음

• html 전달
  
• 컴포넌트 전달

<Button>
  <Header />
</Button>