From 43d6c0968689cead034aa4254a060caf542aa2d2 Mon Sep 17 00:00:00 2001 From: gunom Date: Wed, 14 Jun 2023 17:42:26 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[FEAT]=20=EC=83=9D=EA=B0=81=EA=B3=BC?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...35\352\260\201\352\263\274\354\240\234.md" | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 "week4/\354\203\235\352\260\201\352\263\274\354\240\234.md" diff --git "a/week4/\354\203\235\352\260\201\352\263\274\354\240\234.md" "b/week4/\354\203\235\352\260\201\352\263\274\354\240\234.md" new file mode 100644 index 0000000..d814361 --- /dev/null +++ "b/week4/\354\203\235\352\260\201\352\263\274\354\240\234.md" @@ -0,0 +1,31 @@ +# + +# Props Drilling을 피하는 방법 + +## Context API 사용 + +Context API를 활용하여 전역적으로 데이터를 공유. Context Provider를 통해 데이터를 제공하고, 필요한 컴포넌트에서 Context Consumer나 useContext 훅을 사용하여 데이터 획득. + +## 상태 관리 라이브러리 사용 + +Redux, MobX, Recoil 등의 상태 관리 라이브러리를 활용하여 Props Drilling을 피할 수 있음. 상태를 상위 컴포넌트에서 관리하고 필요한 컴포넌트에서 상태를 가져와 사용가능. + +## 컴포넌트 재구성 + +컴포넌트를 재구성하여 해결. + +중간 단계의 컴포넌트를 추가하여 데이터를 전달하고, 필요한 컴포넌트에서 해당 데이터를 사용. + +# 합동세미나 + +전역상태로 관리할 상태가 존재하지 않아 상태관리 라이브러리 없이 진행. + +# 솝커톤 + +참여X + +# 앱잼 + +recoil을 과제로 사용하면서 효과적으로 상태관리를 할 수 있음을 느낌. + +이번 앱잼에서는 redux를 사용하고 싶음. redux는 대규모에서 쓰여 앱잼에는 맞지 않을 수 있지만, 세팅과정이 복잡하다는 단점은 직접 경험하지 않으면 느끼기 힘들 것이라 생각함. 또, 작은 팀 규모에서 사용이 어떤 단점을 가져오는지 느끼기에 좋은 경험이 될 것이라고 생각됨. From 9d6d619b9c2b65c703e5fe5382eefcea915e7297 Mon Sep 17 00:00:00 2001 From: gunom Date: Wed, 14 Jun 2023 17:47:33 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[FEAT]=204=EC=A3=BC=EC=B0=A8=20=EC=8B=AC?= =?UTF-8?q?=ED=99=94=20=EA=B3=BC=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- week4/weather-prediction/src/components/SkeletonCard.jsx | 2 +- week4/weather-prediction/src/components/WeatherContent.jsx | 2 +- week4/weather-prediction/src/hook/useWeatherData.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/week4/weather-prediction/src/components/SkeletonCard.jsx b/week4/weather-prediction/src/components/SkeletonCard.jsx index 743b187..b491152 100644 --- a/week4/weather-prediction/src/components/SkeletonCard.jsx +++ b/week4/weather-prediction/src/components/SkeletonCard.jsx @@ -1,7 +1,7 @@ import { styled } from "styled-components"; const SkeletonCard = () => { - return ; + return ; }; export default SkeletonCard; diff --git a/week4/weather-prediction/src/components/WeatherContent.jsx b/week4/weather-prediction/src/components/WeatherContent.jsx index af40ca7..f413b38 100644 --- a/week4/weather-prediction/src/components/WeatherContent.jsx +++ b/week4/weather-prediction/src/components/WeatherContent.jsx @@ -6,7 +6,7 @@ import SkeletonCard from "./SkeletonCard"; const WeatherContent = ({ type }) => { const { city } = useParams(); - const { data, error, isLoading } = useWeatherData(type, city); + const { data, isError, isLoading } = useWeatherData(type, city); const getDate = (date_txt) => { const date = new dayjs(date_txt); diff --git a/week4/weather-prediction/src/hook/useWeatherData.js b/week4/weather-prediction/src/hook/useWeatherData.js index dbf943d..cce1ce4 100644 --- a/week4/weather-prediction/src/hook/useWeatherData.js +++ b/week4/weather-prediction/src/hook/useWeatherData.js @@ -5,7 +5,7 @@ import { WEATHER_TYPE } from "../assets/WEATHER_TYPE"; const useWeatherData = (type, city) => { const [data, setData] = useState([]) - const [isError, setIsError] = useState('') + const [isError, setIsError] = useState("") const [isLoading, setIsLoading] = useState(true) const weatherTypeImage = WEATHER_TYPE;