React 컴포넌트 이해

React 컴포넌트 이해

---

React에서 컴포넌트를 사용해 다른 파일에 있는 HTML 코드를 이식하여 사용할 수 있다.

컴포넌트에서 대해서 다시 집고 넘어가자면, 컴포넌트는 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말한다.

컴포넌트를 파일 단위로 작성한 뒤, 필요한 위치에서 로드해서 사용할 수도 있다!

컴포넌트 조합하기

---

• 1단계

<div id="root"></div>

#root {
  padding: 10px;
}

class Component2 extends React.Component {
  render() {
    return <h2>This is Imported Component.</h2>;
  }
}
class Component1 extends React.Component {
  render() {
    return (
      <div>
        <h1>React Example</h1>
        <Component2 />
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);

• 2단계

class Component2 extends React.Component {
  render() {
    let h2Style = { fontSize: 16, fontWeight: "normal" };
    return <h2 style={h2Style}>This is Imported Component.</h2>;
  }
}
class Component1 extends React.Component {
  render() {
    let h1Style = { fontWeight: "normal" };
    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Component2 />
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);