Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
Programming

/

Front-end

React Job Seeker's Practical Zustand Introduction Guide

This course aids students in systematically learning Zustand, from fundamentals to practical use.

(4.8) 9 reviews

106 learners

  • devforgoal
이론 실습 모두
React
zustand

Reviews from Early Learners

What you will learn!

  • Jus Tand's Core Concepts and State Management

  • You will be able to apply Zustand to your project.

  • How to design practical states and actions

  • Advanced features and optimization techniques using Zustand's built-in middleware

Zustand, easy to understand even for non-specialists, all in one go

"I don't think condition management is for me..."

Have you ever experienced something like this?

I searched to learn React state management...
Redux, Context API, Recoil, Jotai, Zustand...
Aren't you at a loss as to what on earth you should learn?

I also diligently watched the Redux tutorial at first.
"I gave up because there were too many settings and it was too complicated"


For a while I thought that state management wasn't for me.

Then by chance I met Zustand!!
There was almost no setup and the code was simple, so I was able to apply it to practice right away.

"Huh? It's this easy?"

From then on, I was no longer afraid of condition management.

This lecture is based on my experience at that time.
This course is designed so that even beginners can complete it without any difficulties, even with a short investment of time .

Four Key Points from This Lecture

Easy explanation that even non-specialists can understand

  • Without complex concepts and terms,
    Why state management is needed and how it works
    I'll explain it to you very easily.

I will tell you exactly how to use it.

  • This isn't a lecture full of theory.
    So that it can be applied directly in practice
    It's organized around frequently used patterns and examples.

No difficult features! Only the essential features are covered.

  • Of course, create , set , get , and selector
    persist, immer, useShallow, devtools, etc.
    We will inform you of only the functions used in the field.

It just takes a little bit of time

  • Fast to learn, easy to master.

  • Zustand's low learning curve! You can master status management in just a short investment of time.

I recommend this to these people!


A prospective college student who wants to apply state management techniques to a React portfolio project

If you want to look like you have experience using zustand , but are still hesitant to start


Beginners who want to learn the concepts and structure of React state management from the basics

Those who want to systematically learn ' Why should we manage this way ' through practice along with lectures


Redux is so complicated that React developers can't even touch it

For those looking for a much lighter and simpler state management tool without complex setup

What if I take this course?

  • React state management isn't scary!

    • You will fully understand core concepts such as create , set , get , and selector , and be able to design your own store.

  • Confidently handle global state in your React projects.

    • You will learn how to efficiently connect state to components using zustand .

  • You'll internalize patterns and features that you can immediately apply to real-world projects.

gustation

example

Learn only the essentials quickly

A condensed lecture consisting of essential concepts and practical examples without unnecessary theories

example2

A structural explanation that tells why?

Rather than simply listing how to use it, we help you understand "Why is it used this way?"

Do you have any questions?

Q. This is my first time hearing about Zustand. Is it difficult if I don't know Redux or the Context API?

no!

This course is a beginner-friendly course for those who are learning Zustand for the first time.
It is structured so that you can follow along if you only know the basics of React, even if you have no prior knowledge of Redux or the Context API.
In fact , it's much more concise and intuitive than Redux, so it can be a good first step to state management.

Q. Can I apply it to my work just by taking this one lecture?

Yes! This course is not just a simple list of how-tos, but is structured around designing state structures and patterns that can actually be used .
In particular, it covers persist, immer, useShallow, TypeScript, and DevTools , so you can apply it to real-world projects right after the lecture.

Updates will continue in the future!

  • This course will continue to be updated.

    • The price is the cheapest right now! The price will increase gradually as updates progress.

  • Those who pay now will have access to all updates for life without any additional costs!


Things to note before taking the class

Player Knowledge and Notes

  • React Basics

  • Javascript Basics

Recommended for
these people

Who is this course right for?

  • People interested in Zustand

  • Front-end developer who found React state management hard

  • Wanting to adopt a new state management library

  • Those who want to learn state management with practical examples

Need to know before starting?

  • react

  • javascript

Hello
This is

106

Learners

9

Reviews

4.8

Rating

1

Course

Curriculum

All

17 lectures ∙ (1hr 28min)

Published: 
Last updated: 

Reviews

All

9 reviews

4.8

9 reviews

  • leeebug님의 프로필 이미지
    leeebug

    Reviews 11

    ∙

    Average Rating 5.0

    Edited

    5

    100% enrolled

    普段はZustandは軽いとばかり思っていましたが、強力ですね。特にスライスパターンをZustandでも使用できるという点を知り、大変参考になりました。

    • hyerimhan1804님의 프로필 이미지
      hyerimhan1804

      Reviews 3

      ∙

      Average Rating 5.0

      Edited

      5

      47% enrolled

      初心者が見ても分かりやすく簡潔です👍🏻

      • 12345678님의 프로필 이미지
        12345678

        Reviews 33

        ∙

        Average Rating 3.8

        3

        29% enrolled

        • freddy님의 프로필 이미지
          freddy

          Reviews 7

          ∙

          Average Rating 5.0

          5

          35% enrolled

          • kyungjun님의 프로필 이미지
            kyungjun

            Reviews 10

            ∙

            Average Rating 5.0

            Edited

            5

            100% enrolled

            $29.70

            Similar courses

            Explore other courses in the same field!

            React基礎入門コース1강의 썸네일

            React基礎入門コース1

            simplecoding

            絵で学びながら、Reactの基礎概念を明確に理解できる講義

            입문

            입문

            React, react.js, frontend

            React基礎入門コース1강의 썸네일

            React基礎入門コース1

            simplecoding

            React を学びながら作成する: 基本강의 썸네일

            React を学びながら作成する: 基本

            jayjinjay

            リアクトを最も簡単かつ迅速に学べるリアクト入門講義です。トイプロジェクトを作りながらコンセプトと実戦感覚を身につけ、配布まで3時間で完成するアルチャ講義！初級、中級、上級のシリーズの最初のレッスンです:)

            초급

            초급

            React, JavaScript

            React を学びながら作成する: 基本강의 썸네일

            React を学びながら作成する: 基本

            jayjinjay

            Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)강의 썸네일

            Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

            gymcoding

            最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

            초급

            초급

            React, Blog, Next.js

            Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)강의 썸네일

            Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

            gymcoding

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs강의 썸네일

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs

            ludgi

            実戦バイブコーディングで会社紹介ランディングページを完成させます。 Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP スタックで、設計から配布まで一度に進行します。 核心は「高速実装 + 検索エンジンによく露出されるSEOベース」です。 🏁 講義目標 ランディング制作 → パフォーマンス最適化 → SEO反映 → 配布/インデックス リアルタイムコーディング（バイブコーディング）でセクション別完成品をすぐ確認 検索反映まで直接体験 🛠️ 実習スタック Cursor AI、Next.js（App Router）、TypeScript TailwindCSS、shadcn/ui、MCP ワークフロー 🔍 SEO実習 講師が提供するSEO最適化用MDファイル適用 メタデータ、OG/Twitterカード、robots/sitemap、構造化データ（JSON-LD） 多言語ルーティング選択適用 🎯 完成物 レスポンシブ会社紹介ランディング + お問い合わせフォーム Lighthouse 95+目標 Vercel配布後Search Console登録およびインデックス要請 📚 この講義で学ぶこと ヒーロー/信頼/機能/FAQセクションを素早く構成する方法 shadcn/uiできれいなUI構成 フォーム検証と基本コンバージョン追跡ポイント設計 構造化データ + 多言語ルーティングでSEOスコアを上げる 配布後Search Consoleを通じたインデックス過程の理解 💡 現業インサイト（講義特典） 単純にコード実装だけでなく、実際の市場で活用されるマーケティング・露出方式も簡単に触れます。 広告、ブログポスティング、コメント作業の現実的な単価範囲 外注・業務委託業者が実際にSEO、露出作業をどのように進行するか 開発者が直接参加した時と外注を任せた時のコスト/効率の差 この部分を通じて単純に技術を超えて実際の現業でどのように活用されるか、どのようなコスト構造で動くかまで感覚を身につけることができます。 一行まとめ 「実装 → 最適化 → 配布 → インデックス」の流れに沿って、 実際の検索露出と現業市場構造まで繋がるウェブ制作プロセスを学びます。

            입문

            입문

            React, Node.js, cursor

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs강의 썸네일

            SEO最適化ランディングページソリューション＆露出戦略：バイブコーディングで完成 with Nextjs

            ludgi

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]강의 썸네일

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

            johnahn

            この講義を通じてリアクトとファイアベースを利用してチャットアプリケーションを作成することができます。

            초급

            초급

            React, Firebase, Web Application

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]강의 썸네일

            フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

            johnahn

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

            ludgi

            Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

            중급이상

            중급이상

            Next.js, React, GraphQL

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

            Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

            ludgi

            非専門家のための真の入門オールインワン開発ブートキャンプ강의 썸네일

            非専門家のための真の入門オールインワン開発ブートキャンプ

            grab

            初心者でもできる、ウェブ、サーバー、モバイル アプリ、機械学習まで習得できるフルスタックの最終講義!! 開発をどこから始めたらよいかわからない場合は、この講義を強くお勧めします。Javascript 1 つで進めます!

            입문

            입문

            JavaScript, React, Node.js

            非専門家のための真の入門オールインワン開発ブートキャンプ강의 썸네일

            非専門家のための真の入門オールインワン開発ブートキャンプ

            grab

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）강의 썸네일

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）

            dodocoding

            Next.js + Cursor IDE でチャットプログラムを1時間で実装できる能力が身につきます。

            입문

            입문

            nextjs, ChatGPT, React

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）강의 썸네일

            1時間でChat GPTクローンをCursorで作成（ワンデークラス）

            dodocoding

            これが本当のバイブコーディング - 開発者のためのバイブコーディング編강의 썸네일

            これが本当のバイブコーディング - 開発者のためのバイブコーディング編

            codecamp

            No Code, Only Prompt 10分でバイブコーディングで作れる単純なサービスはもう捨てましょう！ 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作る 「本物の」実務適用バイブコーディングを学ぶことができます。

            입문

            입문

            React, Next.js, cursor

            これが本当のバイブコーディング - 開発者のためのバイブコーディング編강의 썸네일

            これが本当のバイブコーディング - 開発者のためのバイブコーディング編

            codecamp

            iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

            iOS/Androidアプリ開発のための本番 React Native - Basic

            wintho

            Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

            초급

            초급

            React Native, React, ES6

            iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

            iOS/Androidアプリ開発のための本番 React Native - Basic

            wintho

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

            초급

            초급

            React, Next.js, expo

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

            Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

            codecamp

            [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

            [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

            dakgangjung123

            React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

            초급

            초급

            React, Electron, GUI

            [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

            [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

            dakgangjung123

            TypeScript Korea：React with TypeScriptセミナー강의 썸네일

            TypeScript Korea：React with TypeScriptセミナー

            woongjae

            タイプスクリプトとリアクト関連講座です。

            중급이상

            중급이상

            React, TypeScript

            TypeScript Korea：React with TypeScriptセミナー강의 썸네일

            TypeScript Korea：React with TypeScriptセミナー

            woongjae

            フォローして学ぶノード、リアクトシリーズ - 基本講義강의 썸네일

            フォローして学ぶノード、リアクトシリーズ - 基本講義

            johnahn

            このレッスンでは、リアクトとノードをどのように使用するのかを学ぶことができます。

            초급

            초급

            Node.js, React

            フォローして学ぶノード、リアクトシリーズ - 基本講義강의 썸네일

            フォローして学ぶノード、リアクトシリーズ - 基本講義

            johnahn

            アプリ開発入門のためのReact Native完璧基礎クラス강의 썸네일

            アプリ開発入門のためのReact Native完璧基礎クラス

            junghw

            アプリ開発をしたいけど、どこから始めたらいいか途方に暮れている方々のために準備しました。 この講座で、その悩み、もう終わりにしましょう！

            입문

            입문

            JavaScript, React, Node.js

            アプリ開発入門のためのReact Native完璧基礎クラス강의 썸네일

            アプリ開発入門のためのReact Native完璧基礎クラス

            junghw