韓国語 2024/09/23（月）

シチュエーション: Reactの新機能Hooksについて詳しく議論する

(リアクトゥエシンキヌンフックスエテヘソチェシクヌンノンハダ)

ペルソナ

Aさん: Reactを学び始めたジュニア開発者。Hooksに興味があるが、まだ詳しくは知らない。

Bさん: Reactの経験豊富なシニア開発者。Hooksを実際のプロジェクトで多く使用している。

A: 선배님, React Hooks에 대해 더 자세히 알고 싶어요. 어떤 장점이 있나요? (ソンベニム、リアクトゥフックスエテヘトチャセヒアルゴシポヨ。オットンチャンジョミインナヨ？)

先輩、React Hooksについてもっと詳しく知りたいです。どんな利点がありますか？

B: 좋은 질문이에요! Hooks는 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줘요. 코드가 더 간결해지고 재사용성이 높아져요.

(チョウンチルムニエヨ！フックスヌンハムスヒョンコムポノントゥエソサンテワセンミョンジュギキヌンウルサヨンハルスイッケヘジュォヨ。コドゥガトカンギョルヘジゴチェサヨンソンイノパジョヨ。)

いい質問ですね！Hooksは関数型コンポーネントで状態とライフサイクル機能を使えるようにしてくれます。コードがより簡潔になり、再利用性が高まります。

A: 오, 그렇군요. 가장 많이 사용되는 Hook은 무엇인가요?

(オ、クロックンヨ。カジャンマニサヨンデヌンフックンムオシンガヨ？)

おお、そうですか。最もよく使われるHookは何ですか？

B: useState와 useEffect가 가장 기본적이고 많이 쓰여요. useState는 상태 관리를, useEffect는 부수 효과를 처리해요.

(ユーズステイトゥワユーズイフェクトゥガカジャンキボンジョギゴマニスィヨヨ。ユーズステイトゥヌンサンテクァンリルル、ユーズイフェクトゥヌンブスヒョグァルルチョリヘヨ。)

useStateとuseEffectが最も基本的でよく使われます。useStateは状態管理を、useEffectは副作用を処理します。

A: 예를 들어 설명해 주실 수 있나요?

(イェルルトゥロソルミョンヘチュシルスインナヨ？)

例を挙げて説明していただけますか？

B: 물론이죠. 이렇게 사용해요:

const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `클릭 횟수: ${count}`;
}, [count]);

카운터 상태를 관리하고, 타이틀을 업데이트하는 예제예요.

(ムルロンイジョ。イロッケサヨンヘヨ：

コンストゥ [カウントゥ、セットゥカウントゥ] イコールユーズステイトゥゼロ；

ユーズイフェクトゥパラメタアロウファンクションヘン

ドキュメントゥドットゥタイトゥルイコールバッククォートゥクルリクフェスコロンドルラカッコカウントゥドルラカッコバッククォートゥ；

コンマブラケットゥカウントゥブラケットゥパレンシス；

カウントゥサンテルルクァンリハゴ、タイトゥルルオプデイトゥハヌンイェジェエヨ。)

もちろんです。こんな風に使います：

const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `クリック回数: ${count}`;
}, [count]);

カウンター状態を管理し、タイトルを更新する例です。

A: 와, 정말 간단해 보이네요! 클래스 컴포넌트보다 훨씬 읽기 쉬워요. (ワ、チョンマルカンダンヘボイネヨ！クルレスコムポノントゥボダフォルッシンイルギシウォヨ。)

わあ、本当に簡単そうですね！クラスコンポーネントよりずっと読みやすいです。

B: 맞아요. 게다가 커스텀 Hook을 만들어서 로직을 재사용할 수도 있어요. 예를 들어, useFetch라는 Hook을 만들어 데이터 fetching을 간단히 할 수 있죠.

(マジャヨ。ケダガコストムフックルマンドゥロソロジグルチェサヨンハルスドイッソヨ。イェルルトゥロ、ユーズフェッチラヌンフックルマンドゥロデイタフェッチングルカンダニハルスイッチョ。)

そうですね。さらに、カスタムHookを作ってロジックを再利用することもできます。例えば、useFetchというHookを作ってデータフェッチングを簡単にできますよ。

A: 대박! Hooks 정말 강력한 것 같아요. 더 자세히 공부해 봐야겠어요.

(テバク！フックスチョンマルカンリョクハンコッカタヨ。トチャセヒコンブヘボァヤゲッソヨ。)

すごい！Hooksは本当に強力そうですね。もっと詳しく勉強してみます。

B: 그래요. React 공식 문서에 훌륭한 튜토리얼이 있으니 참고해 보세요. 궁금한 점 있으면 언제든 물어보세요!

(クレヨ。リアクトゥコンシクムンソエフルリュンハンチュトリオルイイッスニチャムゴヘボセヨ。クンクムハンチョムイッソミョンオンジェドゥンムロボセヨ！)

そうですね。React公式ドキュメントに素晴らしいチュートリアルがあるので参考にしてみてください。質問があればいつでも聞いてくださいね！

単語集

훅 (フック): Hook

클래스 (クルレス): クラス

함수형 컴포넌트 (ハムスヒョンコムポノントゥ): 関数型コンポーネント

클래스형 컴포넌트 (クルレスヒョンコムポノントゥ): クラス型コンポーネント

상태 (サンテ): 状態

속성 (ソクソン): プロパティ

생명주기 (センミョンジュギ)ライフサイクル

이벤트 (イベントゥ): イベント

재사용성 (チェサヨンソン): 再利用性

일회성 (イルフェソン): 使い捨て

부수 효과 (ブスヒョグァ): 副作用

주 효과 (チュヒョグァ): 主効果

예제 (イェジェ): 例

이론 (イロン): 理論

커스텀 (コストム): カスタム

기본 (キボン): デフォルト

로직 (ロジク): ロジック

데이터 (デイタ): データ

文法の解説

'-아/어 보다': 「～してみる」という試行を表す表現です。例えば、'공부해 봐야겠어요'（勉強してみなければなりません）のように使います。

'-ㄹ/을 수 있다': 「～することができる」という可能性や能力を表す表現です。'사용할 수 있게 해줘요'（使うことができるようにしてくれます）のように使用されています。

文法の解説​

文法の解説