Component

레고 부품처럼 웹 사이트를 구성하는 요소

Props (Property)

Component의 속성을 담고 있는 JS 객체

색, 폰트 크기 및 스타일, 테두리 등의 속성을 바꿀 수 있다

같은 Component라도, Props가 다르면 다른 Element가 만들어진다.

[핵심]
모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여주어야 한다.
~ 리액트 공식 문서 ~

Component 생성

Function Componet

function Welcom(props) {
  return <h1> 안녕, {props.name}</h1>
}

Class Component

class Welcome extends React.Component {
  render() {
    return <h1>안녕, {this.props.name}</h1>
  }
}

Component 이름 짓기

Component는 항상 대문자로 시작할 것

만약 Component의 시작이 소문자라면, 리액트 컴파일러는 이를 DOM Component로 인식한다.

렌더링

ReactDOM.render(
  {렌더링할 Component},
  document.getElementById({렌더링 할 위치})
 );

Component 합성

여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것
(밑의 것을 예시로 들면, App Component는 Welcom Component 활용해 만들었음)

function Welecom(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App(props) {
  return (
    <div>
      <Welcome name="Mike" />
      <Welcome name="Steve" />
      <Welcome name="Jane" />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

이를 잘 활용하면 코드 재사용성이 좋아진다.

다만, 너무 남용하면 오히려 코드를 이해하기가 힘들 수 있다.

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플