Component란

1. React에서 페이지를 구성하는 최소단위
2. Component의 이름은 대문자로 시작
3. Class Component/Function Component로 나뉨
4. Controlled Component/Uncontrolled Component

🌀 Component의 이름은 대문자로 시작한다.

const MyComponent = ({ children }) => {
  return (
    <div
      style={{
        padding: 20,
        color: "blue",
      }}
    >
      {children}
    </div>
  );
};

위와 같이 Component를 만들고 아래의 코드처럼 다른 Component에서 자유롭게 활용할 수 있다.
이때 Component의 이름은 항상 대문자로 시작한다.

const App = () => {
  return (
    <div>
      <p>Hi</p>
      <MyComponent>guys</MyComponent>
      <div>see ya</div>
    </div>
  );
};

🌀 Class Component/Function Component로 나뉜다.

👉 Class Component

class Hello extends Component {
  render() {
    const { name } = this.this.props;
    return <div>{name}, good to meet you.</div>;
  }
}

초기 React의 Component는 모두 Class Component였지만 이후 v16 부터 새로운 Function Component와 Hooks 개념이 발표되었고,

현재는 Function Component가 주로 사용되고 있다.

👉 Function Component

const Hello = (props) => {
  const { name } = props;
  return <div>{name}, good to meet you.</div>;
};

🌀 Props(Properties)

<MyComponent user={{ name: "바나나" }} color="skyblue">
  <div>Happy</div>
</MyComponent>;

// user={{ name: "바나나" }} color="skyblue" => Props

위의 MyComponent 컴포넌트에서 Attribute에 해당하는 부분을 Props(Properties)라고 한다.

컴포넌트 안에 작성된 하위 Element를 children이라고 한다. children도 결국 props중 하나!

const MyComponent = (props) => {
  const { user, color, children } = props;

  return (
    <div style={{ color }}>
      <p>{user.name}의 하위 element는</p>
      {children}
    </div>
  );
};

상위 Element로부터 전달받은 props를 활용하는 코드이다.

위 코드를 보면 알 수 있듯이 이 컴포넌트의 자식(children) 요소 역시 props로 부터 값을 받아온다.

❗Component의 특징

1. 컴포넌트끼리 데이터를 주고받을 땐 Props

2. 컴포넌트 내에서 데이터를 관리할 땐 State

3. 데이터는 부모 -> 자식으로만 전달가능