1.はじめに この記事ではReactで親子関係にあるコンポーネントのデータの受け渡し方法を紹介します Reactでのコンポーネント間のデータの受け渡しっていざ使おうというときに忘れてしまいがちですよね。 なのでこの記事では誰でも扱えるように細かいステップに分けてまとめました。 次の3つの順番で紹介します。 1. なぜコンポーネント間で受け渡しをするのか? 2. 親から子に値を渡す方法 3. 子から親に値を渡す方法 この記事を読めばコンポーネント間のデータの受け渡しが誰でも簡単にできるようになります。 2.なぜコンポーネント間でデータを受け渡しするのか? なぜコンポーネント間で受け渡しをするのでしょうか? その理由はデータのスコープを小さくできるためです。 Reduxを使えばデータを一元管理できるので親子で受け渡しをしなくても、どのコンポーネントからも呼び出すことができます。 しかし、全ての
![たった5分で分かる!Reactで親子コンポーネントのデータの受け渡す方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2b2be9722b36ad9da609acc4796e0d1211b0e56/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgxJTlGJUUzJTgxJUEzJUUzJTgxJTlGNSVFNSU4OCU4NiVFMyU4MSVBNyVFNSU4OCU4NiVFMyU4MSU4QiVFMyU4MiU4QiVFRiVCQyU4MVJlYWN0JUUzJTgxJUE3JUU4JUE2JUFBJUU1JUFEJTkwJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgxJUFFJUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgyJUJGJUUzJTgxJUFFJUU1JThGJTk3JUUzJTgxJTkxJUU2JUI4JUExJUUzJTgxJTk5JUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NmE1MjdkOWJjYmZjNzAwODIyZjM0ZjEzNWVlM2UxZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzeXVfaWtlZGEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM0NjFhODgyZjU2MTViOTNjZGZkNmNmMjUyMjk2MjQ5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dace620a9dbc06b1c4a2d7152da1f6994)