둥글게 둥글게

팀 프로젝트를 진행하면서 '찜하기' 기능을 구현하는 도중에 백엔드 서버로 불필요한 호출이 반복되는 것을 발견하였다. 어떻게 해야 불필요한 호출을 막을 수 있을까 고민하던 중에 팀원 한 분이 useCallback에 대해서 말씀해 주셔서 찾아보았다 🙌🏻 💡 useCallback이란? 👉🏻 react 라이브러리에서 제공하는 훅(Hook)에 해당 👉🏻 함수를 메모이제이션하여 동일한 콜백 함수 인스턴스를 재사용 ✅ 의존성 배열의 값이 변경되지 않는 한, 같은 콜백 함수 인스턴스를 계속해서 사용 가능 👉🏻 아래와 같은 불필요한 함수 생성을 방지 👻 React 컴포넌트가 렌더링 될 때마다 함수들이 새로 생성 ➡️ 해당 함수를 사용하는 다른 컴포넌트도 함께 리렌더링 👻 부모 컴포넌트가 업데이트 되거나 상태값이 변경될 ..

✨ Project 식단어때(How-about-the-diet) 🥦 깃허브 주소 : https://github.com/YouJin-Cho/how-about-the-diet 🥑 유튜브 주소 https://www.youtube.com/watch?v=A6v4SUv-TAo&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=1 📌 Project '식단어때' 🥒 소개 “건강하게 먹자!” “똑똑하게 먹자!” 내가 먹는 음식이 어디에 좋은지는 알고 먹어야지? 현재 다양한 건강식이 생기면서 소비자가 건강을 챙기며 똑똑하게 먹자는 인식이 강해지고 있습니다. 하지만 대부분 음식을 섭취할 때, 무조건 몸에 좋다고만 생각해 어떤 영양소가 들었는지 확실하게 모른 채 섭취하는 경우가 많습니다. ’식단..

💁‍♀️ 온라인 쇼핑몰을 만들어보자! 간단한 아이템을 판매하는 쇼핑몰을 만들어보고자 한다. 온라인 쇼핑몰에서 흔히 볼 수 있는 테마 변경, 모달 창, 검색 창 등의 기능을 넣어 구현해보고자 한다. ✨ 결과물 💡 오픈 API를 통해 상품 가져오기 (상품 category page, 상품 detail page) 💡 테마 (Dark & White) 변경 기능 💡 상품 검색 기능 💡 캐러셀 구현 💡 BreadCrumb 구현 💡 @media 쿼리를 통해 모바일 화면 구현 💡 기타 기능 (헤더 고정, 모달 창 구현, 별점 구현, localStorage 공간 활용 등) 💜 vite로 react 프로젝트 생성 npm create vite 프로젝트명 --template react-ts ✅ CRA보다 속도가 빠른 VITE를..

💡 React에 가장 기본이 되는 Hook을 뽑자면 useState()가 아닐까.. 할 정도로 정말 많이 사용하게 되었다. 상태값을 직접 조작해서 변경하지 않아도 되는 편리함을 가지고 있으니!! useState()를 아래와 같이 정리해보고자 한다. 🫠 useState()란? > state 값이 변경되면 re-rendering 💡 const [state, setState] = useState('기본값'); * state : 변경하고자 하는 값 * setState : state를 변경 * 기본값 : state의 기본값 ❗️ useState() 사용 주의점 * 하나의 컴포넌트 안에서만 사용할 수 있다. * state의 값을 직접 수정하지 않는다. 🤜🏻 useState()를 사용해야 하는 이유? > 버튼을 누르..