[React] 리액트 학습하기 - props로 자식 컴포넌트에 데이터 전달

컴포넌트 호출 시 props를 통해 원하는 속성을 전달하고, 전달된 데이터를 활용해 컴포넌트의 렌더링 결과물을 각각 다르게 변형가능.
컴포넌트에 props로 데이터를 전달해 하나의 컴포넌트를 다양한 형태로 재사용가능

*props : properties의 약자로 일반 javascript 함수에 파라미터를 통해 인수전달하는 개념과 비슷

import Title from "./Title";

function App() {
  return (
    <>
      <Title text={"hello"} color={"red"} />
      <Title text={"world"} color={"pink"} />
    </>
  );
}

export default App;

부모컴포넌트(App.jsx)에서 자식컴포넌트(Title.jsx)호출 시 자식컴포넌트에
key={value} 형태로 특정 데이터를 전달할 수 있다. (=단방향 데이터방식, 한쪽으로만 데이터 전달)
key값은 임의로 지정가능하다. 리액트는 대표적 단방향 데이터 바인딩 방식.
한쪽 방향으로만 전달되어 복잡한 구조의 경우 흐름을 추적하기 편리하다.

function Title({ text, color }) {
  return <h1 style={{ color: color }}>{text}</h1>;
}

export default Title;

props로 전달된 데이터를 자식컴포넌트(Title.jsx)는 위와 같이 활용된다.
Title()안에 key값을 써준다. {}안에는 key의 value값이 들어가게 된다.

*color에 괄호가 2개인 이유 : 안쪽 {}은 객체 리터럴 표현 중괄호, 바깥 {}는 연산을 위한 중괄호