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; 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는 대규모에서 쓰여 앱잼에는 맞지 않을 수 있지만, 세팅과정이 복잡하다는 단점은 직접 경험하지 않으면 느끼기 힘들 것이라 생각함. 또, 작은 팀 규모에서 사용이 어떤 단점을 가져오는지 느끼기에 좋은 경험이 될 것이라고 생각됨.