Zenn
🖌️

【初心者向け】コンポーネントとレンダリングのお話

に公開
React
TypeScript
tech

Reactのコンポーネントとレンダリングの基本

Reactは、UI（ユーザーインターフェース）を構築するためのJavaScriptライブラリです。
Reactの基本的な考え方として、「コンポーネント」と「レンダリング」があります。

コンポーネントとは？

コンポーネントは、アプリケーションのUIを構成する再利用可能な部品です。
例えば、ボタンやフォーム、ページ全体などもコンポーネントとして定義できます。

const Hello = () => {
  return <h1>こんにちは！</h1>;
};

これは「Hello」というコンポーネントで、画面に「こんにちは！」と表示します。

レンダリングとは？

レンダリングとは、Reactがコンポーネントを元に画面を描画する処理のことです。

const App = () => {
  return (
    <div>
      <Hello />
    </div>
  );
};

このように、Appコンポーネント内にHelloコンポーネントを配置すると、Helloの内容が画面に表示されます。

状態(State)が変わると再レンダリングされる

コンポーネントは内部に状態を持つことができ、状態が変わると自動的に画面が再描画されます。

const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
};

この例では、「増やす」ボタンを押すと状態countが変わり、再レンダリングされて新しい値が表示されます。

まとめ

  • コンポーネントは画面の部品。
  • レンダリングはその部品を画面に表示する仕組み。
  • 状態が変わるとReactが自動で再レンダリングしてくれる。

Reactのレンダリングの仕組みを理解することで、効率的な開発が可能になります。

Discussion