{error}
;
+ }
+
+ return (
+
+
+ );
+};
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/Pages/UseCallbackPage.tsx b/mission/chapter10/useCallback/src/Pages/UseCallbackPage.tsx
new file mode 100644
index 00000000..2fd8d678
--- /dev/null
+++ b/mission/chapter10/useCallback/src/Pages/UseCallbackPage.tsx
@@ -0,0 +1,71 @@
+import { useCallback, useState } from "react";
+import CountButton from "../components/CountButton";
+import TextInput from "../components/TextInput";
+
+function heavyComputation() {
+ let result = 0;
+ for (let i = 0; i < 10000000; i++) {
+ result += i;
+ }
+ return result;
+}
+
+const UseCallbackPage = () => {
+
+ // useState의 initial 과정일 때,
+
+ // case1. 함수 참조 방식
+ // const [count, setCount] = useState(heavyComputation);
+
+ // case2. 콜백 함수 방식
+ // const [count, setCount] = useState(() => heavyComputation());
+
+ // case3. 함수 호출 방식
+ // const [count, setCount] = useState(heavyComputation());
+
+ // case1,2의 경우 첫 렌더링할 때만 직접 계산이 이뤄지는 형태!
+ // but, case3의 경우 렌더링이 될 때마다 매번 계산이 이뤄지는 형태!
+
+ const [count, setCount] = useState(heavyComputation);
+
+ const handleIncrease = (): void => {
+ setCount((prev) => prev + 1);
+ }
+
+ const [cnt, setCnt] = useState로딩중...
+ ) : (
+
+
+
+ )
+}
+
+export default UseCallbackPage
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/apis/axiosClient.ts b/mission/chapter10/useCallback/src/apis/axiosClient.ts
new file mode 100644
index 00000000..363c9637
--- /dev/null
+++ b/mission/chapter10/useCallback/src/apis/axiosClient.ts
@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const axiosClient = axios.create({
+ baseURL: "https://api.themoviedb.org/3",
+ headers: {
+ Authorization: `Bearer ${import.meta.env.VITE_TMDB_TOKEN}`,
+ },
+
+});
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/assets/react.svg b/mission/chapter10/useCallback/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/mission/chapter10/useCallback/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/CountButton.tsx b/mission/chapter10/useCallback/src/components/CountButton.tsx
new file mode 100644
index 00000000..e37c28a7
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/CountButton.tsx
@@ -0,0 +1,27 @@
+import { memo } from 'react'
+
+interface ICountButton {
+ onClick: (count: number) => void;
+}
+
+const CountButton = ({ onClick }: ICountButton) => {
+ console.log('CountButton rendered');
+
+ return (
+
+ )
+}
+
+export default memo(CountButton);
+// Props에 전달된 값이 동일하다면, 해당 컴포넌트는 리렌더링이 되지 않음
+
+// 주의 사항
+// 1. 의존성 배열을 신중하게 설정
+// - 만약 cnt를 넣지 않았으면 제대로 업데이트가 되지 않음
+// - 너무 많은 변수를 넣게 되면, 최적화 효과가 사라짐.
+
+// 2. useCallback TradeOff
+// - useCallback 함수는 메모리에 저장되기 떄문에, 메모리 사용량이 늘게 된다.
+// - 정말 필요할 때만 사용하기.
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/Input.tsx b/mission/chapter10/useCallback/src/components/Input.tsx
new file mode 100644
index 00000000..e58b0696
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/Input.tsx
@@ -0,0 +1,25 @@
+interface InputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ className?: string;
+}
+
+export const Input = ({
+ value,
+ onChange,
+ placeholder = "검색어를 입력하세요",
+ className,
+}: InputProps) => {
+ return (
+ {
+ onChange(e.target.value);
+ }}
+ placeholder={placeholder}
+ className={`w-full rounded-md border border-gray-500 shadow-sm p-2
+ focus:border-blue-500 focus:ring-blue-500 ${className}`}
+ />
+ );
+};
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/LanguageSelector.tsx b/mission/chapter10/useCallback/src/components/LanguageSelector.tsx
new file mode 100644
index 00000000..37be77d2
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/LanguageSelector.tsx
@@ -0,0 +1,37 @@
+import type { MovieLanguage } from "../types/movies";
+
+interface LanguageOption {
+ value: string;
+ label: string;
+}
+
+interface LanguageSelectorProps {
+ value: string;
+ onChange: (value: MovieLanguage) => void;
+ options: LanguageOption[];
+ className?: string;
+}
+
+const LanguageSelector = ({
+ value,
+ onChange,
+ options,
+ className,
+}: LanguageSelectorProps) => {
+ return (
+
+ );
+};
+
+export default LanguageSelector;
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/MovieCard.tsx b/mission/chapter10/useCallback/src/components/MovieCard.tsx
new file mode 100644
index 00000000..db52c125
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/MovieCard.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import type { Movie } from "../types/movies";
+import MovieDetailModal from "./MovieDetailModal";
+
+interface MovieCardProps {
+ movie: Movie;
+}
+export const MovieCard = ({ movie }: MovieCardProps) => {
+ const ImageBaseUrl = "https://image.tmdb.org/t/p/w500"; // 이미지
+ const fallbackImageUrl = "https://placehold.co/600x400"; // 이미지가 없다면
+
+ const [isModalOpen, setIsModalOpen] = useState(false); // 상세정보모달
+
+ return (
+ <>
+ {count}
+ + +같이 배우는 리액트 useCallback편
+Count : {cnt}
+Text
+
+ {text}
+
+ setIsModalOpen(true)}
+ className="overflow-hidden rounded-lg bg-white shadow-md
+ transition-all hover:shadow-lg hover:bg-gray-200 cursor-pointer"
+ >
+
+
+ {isModalOpen && (
+
+ 
+
+
+
+ {movie.vote_average.toFixed(1)}
+
+
+
+ + {movie.title} +
++ {movie.release_date} | {movie.original_language.toUpperCase()} +
++ {movie.overview.length > 50 + ? `${movie.overview.slice(0, 50)}...` + : movie.overview} +
+
+
+ );
+};
+
+export default MovieDetailModal;
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/MovieFilter.tsx b/mission/chapter10/useCallback/src/components/MovieFilter.tsx
new file mode 100644
index 00000000..7f669182
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/MovieFilter.tsx
@@ -0,0 +1,79 @@
+import { memo, useState } from "react";
+import type { MovieLanguage, MovieFilters } from "../types/movies";
+import { Input } from "./Input";
+import { SelectBox } from "./SelectBox";
+import LanguageSelector from "./LanguageSelector";
+import { LANGUAGE_OPTIONS } from "../constatns/movie";
+
+interface MovieFilterProps {
+ onChange: (filter: MovieFilters) => void;
+}
+
+const MovieFilter = ({ onChange }: MovieFilterProps) => {
+ const [query, setQuery] = useState
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+
+ {movie.title}
++ {movie.original_title} +
+
+ ⭐ {movie.vote_average.toFixed(1)} ({movie.vote_count} 평가)
+
+
+
+
+
+ + 📅 개봉일: {movie.release_date} +
++ 🔥 인기도: {movie.popularity} +
++ 📌 즐겨찾기 수: {movie.vote_count} +
+
+ {movie.overview || "줄거리 정보가 없습니다."}
+
+
+
+
+ IMDb에서 검색
+
+
+
+
+
+ );
+};
+
+export default memo(MovieFilter);
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/MovieList.tsx b/mission/chapter10/useCallback/src/components/MovieList.tsx
new file mode 100644
index 00000000..0524b154
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/MovieList.tsx
@@ -0,0 +1,29 @@
+import type { Movie } from "../types/movies";
+import { MovieCard } from "./MovieCard";
+
+interface MovieListProps {
+ movies: Movie[];
+}
+
+const MovieList = ({ movies }: MovieListProps) => {
+ if (movies.length === 0) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ 검색 결과가 없습니다.
+
+
+ );
+};
+
+export default MovieList;
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/SelectBox.tsx b/mission/chapter10/useCallback/src/components/SelectBox.tsx
new file mode 100644
index 00000000..38b04785
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/SelectBox.tsx
@@ -0,0 +1,29 @@
+interface SelectBoxProps {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ label: string;
+ id?: string;
+ className?: string;
+}
+
+export const SelectBox = ({
+ checked,
+ onChange,
+ label,
+ id = "checkBox",
+ className,
+}: SelectBoxProps) => {
+ return (
+
+ {movies.map((movie) => (
+
+
+ onChange(e.target.checked)}
+ id={id}
+ className="size-4 rounded border-gray-300 bg-gray-200 text-blue-600
+ focus:ring-blue-500"
+ />
+
+
+ );
+};
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/components/TextInput.tsx b/mission/chapter10/useCallback/src/components/TextInput.tsx
new file mode 100644
index 00000000..e8cfe0ec
--- /dev/null
+++ b/mission/chapter10/useCallback/src/components/TextInput.tsx
@@ -0,0 +1,19 @@
+import { memo } from "react";
+
+interface ITextInput {
+ onChange: (text: string) => void;
+}
+
+const TextInput = ({ onChange }: ITextInput) => {
+ console.log('TextInput rendered');
+
+ return (
+ onChange(e.target.value)}
+ />
+ );
+};
+
+export default memo(TextInput);
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/constatns/movie.ts b/mission/chapter10/useCallback/src/constatns/movie.ts
new file mode 100644
index 00000000..65a04d37
--- /dev/null
+++ b/mission/chapter10/useCallback/src/constatns/movie.ts
@@ -0,0 +1,5 @@
+export const LANGUAGE_OPTIONS = [
+ { value: "ko-KR", label: "한국어" },
+ { value: "en-US", label: "English" },
+ { value: "ja-JP", label: "日本語" },
+];
\ No newline at end of file
diff --git a/mission/chapter10/useCallback/src/hooks/useFetch.ts b/mission/chapter10/useCallback/src/hooks/useFetch.ts
new file mode 100644
index 00000000..08332781
--- /dev/null
+++ b/mission/chapter10/useCallback/src/hooks/useFetch.ts
@@ -0,0 +1,32 @@
+import type { AxiosRequestConfig } from "axios";
+import { useEffect, useState } from "react";
+import { axiosClient } from "../apis/axiosClient";
+
+const useFetch =