⚛️ React/문제풀기 (코딩애플: React)

React : 최근 본 상품 만들기 (localStorage, map, JSON)

조건 useNavigate훅을 사용한 상세보기 페이지("/detail/:id"형태)에 접근하면 해당 상품의 id 번호를 최근 본 상품에 업데이트한다. 여기서 최근 본 상품은 항상 옆에 떠 있는 플로팅 박스이다. 풀이 App.js function App() { let getWatched = localStorage.getItem('watched'); ... useEffect(() => { // 로컬스토리지 'watched'가 존재하지 않을 때만 빈 배열을 생성 if (!getWatched)) { localStorage.setItem('watched', JSON.stringify([])); } }, []); ... return ( ... // getWatched가 존재하면 Watched 컴포넌트를 랜더링 //..

React : 상품을 장바구니에 추가하기 (immer, redux, action, payload)

조건 상세페이지에서 버튼을 누르면 장바구니페이지에 해당 상품이 업데이트된다. 풀이 store.js import { createSlice } from '@reduxjs/toolkit' let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 1, name : 'Red Knit', count : 1} ] , reducers : { ... addCart(state, action){ const newCart = action.payload; return [...state, newCart]; } } }) export let { changeName, changeCount, add..

React : 장바구니 제품 수량변경 (map, redux, action, payload)

조건 map으로 data를 불러온 장바구니 테이블에서 수량변경 버튼을 누르면, array에서 누른 버튼 옆에 있는 상품과 id값이 같은 상품을 찾아서 count값을 1 플러스 연산한다. 풀이 component.js { state.cart.map((a, i)=> { state.cart[i].id } { state.cart[i].name } { state.cart[i].count } { dispatch(changeCount(state.cart[i].id)) }}>➕ ) } store.js let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Gre..

React : 탭 내용 fade되도록 만들기 (+class에 변수 넣기)

풀이 useEffect를 사용하여 tab 값이 변경될 때마다 fade 값을 업데이트하고, 컴포넌트가 언마운트될 때 fade를 초기화하도록 넣었다. function TabContent({tab}){ let [fade, setFade] = useState('') useEffect(()=>{ setTimeout(()=>{ setFade('end') }, 100) return ()=>{ setFade('') } }, [tab]) return ( {/* */} { [내용0, 내용1, 내용2][tab] } ) } 알게 된 점 cleanup function을 사용해 end를 뗐다가 부착할 수 있도록 하였다. setTimeout을 이용하여 automatic batching 기능을 무효할 수 있도록 하였다. class에..

React : 탭 만들기 (if else, array로 만들기) + props 귀찮을 때 팁

풀이 function Detail(props){ let [tab, setTab] = useState(0); return ( {setTab(0)}}>버튼0 {setTab(1)}}>버튼1 {setTab(2)}}>버튼2 ) } function TabContent(props){ if (props.tab === 0) { return 내용0 } else if (props.tab === 1) { return 내용1 } else if (props.tab === 2) { return 내용2 } } 더 센스있게 풀기 function TabContent({tab}){ return [내용0, 내용1, 내용2][tab] } 알게 된 점 JSX는 JavaScript의 확장 문법이지만, switch 문은 JavaScript의 제어..

React : 더보기 버튼을 누를 때마다 다른 get주소 데이터 불러오기 (+로딩중)

조건 더보기 버튼을 1번과 2번 누를 때 각각 다른 get 주소 상품 데이터를 불러오고, 3번 누르면 더이상 상품이 없다고 표시한다. 풀이 '3번 이상 더보기 버튼을 눌렀을 시 더이상 상품 없음 알림'과 '더보기 버튼 클릭 횟수'를 state로 작성했다. 버튼 클릭 시 클릭 횟수를 1 증가시키는 콜백함수(handleClick)를 작성해 버튼 이벤트핸들러 안에 넣었다. 더보기 버튼 클릭 시 실행될 콜백함수(moreProduct)를 작성했다. - ajax로 상품데이터를 불러오기 전 loading을 실행시켰다. (setLoading(true);) - 클릭 횟수에 따른 url을 변수로 만든 후, if문으로 처리하였다. (3번 이상 클릭 시 '상품 없음 알림' true, '로딩' false, ajax 실행을 중단..