こんにちは!フリーランスエンジニアの雄貴です! Reactを用いたコンポーネント設計の方針は様々ありますが、 私が普段用いている手法を紹介しようと思います! Reactのコンポーネント従来のコンポーネントだと、以下のコードのように関数の中でstate(状態)やfunction(ロジック)を定義し、それを「return」直下のview部分に渡してレンダリングしています。 import React from 'react' /** * InputForm * @returns */ export const InputForm: React.FC = () => { // state (状態) const [value, setValue] = React.useState('') // function (ロジック) const handleChange = (event: React.Ch
![Container / Presentational構成【Reactのコンポーネント設計】 | NOCHITOKU](https://cdn-ak-scissors.b.st-hatena.com/image/square/975a8104fc880711d3af861b589bdc72f532814d/height=288;version=1;width=512/https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F07ff07e8d1244dd1984512c2a5431805%2F8e7e48e44a4943609619d7803518cdd0%2FNo1%25E3%2582%25A2%25E3%2582%25A4%25E3%2582%25AD%25E3%2583%25A3%25E3%2583%2583%25E3%2583%2581.png)