본문 바로가기

[개발] Practice/React31

[React] localStorage 로 DB 없이 데이터 저장하기 💡 실습 포인트! 강사님의 localStorage 수업을 들은 후에, "최근 본 상품" 기능을 만드는 가이드를 활용하여 내가 생각한 대로 "최근 본 상품" UI 를 만들고 기능을 구현해보았다. 처음 이 기능을 만들 때만 해도 막막했는데, 에러코드를 읽어가며 아쉬운 부분을 하나하나 추가, 수정해나가다보니 어느덧 꽤 그럴싸한 형태로 만들어졌다. 💜 localStorage 사용법 알아보기 새로고침을 하면 JS 파일들을 모두 처음부터 다시 읽어들이기 때문에 당연하게도 모든 state 의 데이터는 초기화된다. 이렇게 state 에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB 에 저장하면 되는데, 만약 별도의 서버나 DB 지식이 없다면 localStorage 에 저장하는 방법이 있다. localStorage .. 2022. 3. 31.
[React] props 대신 redux 사용해보기_5 💡 실습 포인트! 기존에 작성했던 state 를 props 로 만들어주는 함수 및 export default connect()() 는 상대적으로 예전에 쓰이던 방식이지만 현업에서 코드를 읽어낼 수 있어야 하므로 이전 수업을 통해 배워보았다. 이번에는 useSelector() 와 useDispatch() 를 이용하여 훨씬 더 쉽고 간략하게 코드를 작성할 수 있는 방법을 배워보았다. 수업에 배운 것들을 활용하여 다른 파일에도 적용해보았다. 💜 전체 코드 미리보기 // 전체 코드 미리보기 // 전체 코드의 내용이 너무 길어 불필요한 부분은 제외했다. import { useDispatch, useSelector } from 'react-redux'; function Cart(props) { let state =.. 2022. 3. 29.
[React] props 대신 redux 사용해보기_4 💡 실습 포인트! 💜 "주문하기" 버튼을 클릭한 상품을 장바구니에 담기 오늘은 redux 를 이용하여 특정 상품의 상세 페이지에서 "주문하기" 버튼을 클릭하면 장바구니 페이지로 이동되고, 장바구니 페이지에는 "주문하기" 버튼을 클릭했던 상품이 추가되어 보여지게 해보았다. 다만, 이미 장바구니에 담긴 상품을 추가 주문하면 행이 새로 만들어지는 게 아니라 수량만 추가되어야 하는데 이 부분은 아직 미완성이라 조만간 수정을 해보려고 한다. 💜 수량 조절 버튼 기능 수정하기 지난번에 장바구니 페이지의 수량 조절 버튼 기능을 만들 때, dispatch 할 때 데이터를 받아오는 방법을 몰라서 첫번째 항목만 기능이 작동하도록 하드코딩을 했었다. 그래서 이번 수업 내용을 활용하면 수량 조절 버튼 기능도 id 데이터를 받.. 2022. 3. 29.
[React] props 대신 redux 사용해보기_3 💡 실습 포인트! reducer 가 여러 개 필요한 경우 어떤 식으로 redux 를 활용해야하는지 알아보기 위해 장바구니 페이지에 알림창 UI 를 하나 만들어보았다. 하지만 이렇게 하나의 Component 에만 사용할 state 데이터라면 redux 에 굳이 저장할 필요가 없이 useState() 를 사용하는 것이 훨씬 쉽고 간단하다는 것도 알게 되었다. 이번에는 reducer 가 여러 개 필요한 경우 코드를 어떻게 작성하는지 배우기 위해 코드를 아래와 같이 작성하긴했지만, 복습하면서 useState() 를 사용한 방식으로 바꿀 예정이다. 💜 장바구니 페이지에 알림창 만들기 신규가입하면 최대 20% 할인 쿠폰을 제공한다는 알림창을 장바구니 페이지 하단에 띄우고 닫기 기능을 추가해보았다. 🤍 알림창 UI .. 2022. 3. 29.
[React] props 대신 redux 사용해보기_2 💡 실습 포인트! 오늘은 redux 를 사용하여 수량 조절 버튼을 만들어보았다. 다만 지금은 reducer() 에 0번 인덱스에 해당하는 1번 상품만 + 버튼과 - 버튼으로 수량 조절이 가능하게끔 해두어서 다른 상품들은 수량 조절이 불가하다. 파라미터로 인덱스를 넣을 수는 없을까 고민해보고 코드를 수정해보았지만 아직 redux 에 대한 공부가 부족해서인지 맘처럼 되지는 않았다. 차근차근 배우면서 구글링해보고 나중에 다시 해봐야겠다. 💜 redux 를 사용하여 state 데이터 수정하는 방법 알아보기 reducer 함수를 만들어서 데이터 수정하는 방법을 정의한다. 원하는 위치에서 dispatch() 함수를 사용하여 reducer 에 수정해달라고 요청한다. 💜 장바구니 품목 수량 조절 버튼 만들기 수량 열에.. 2022. 3. 28.
[React] props 대신 redux 사용해보기 💡 실습 포인트! 이번에는 props 를 대신하는 방법 중 하나인 redux 에 대해서 조금 공부해보았다. 아직까지는 내가 만든 프로젝트가 하위 Component 가 별로 없다보니 props 보다 편한지에 대해 논하기는 어렵긴 하다. 마지막 redux 수업까지 잘 들어서 야무지게 써먹어야겠다. 💜 props 대신에 사용할 수 있는 방법 찾아보기 props 를 대신할 수 있는 방법으로는 Context API 나 Redux 를 이용하는 방법이 있다. 이전에는 Context API 를 이용하는 방법을 살펴보았으므로, 이번에는 Redux 를 이용해보았다. 사실, React 를 이용한 실제 사이트 개발 환경에서는 redux 를 설치하여 사용하는 곳이 좀 더 많다. 💜 장바구니 페이지 만들기 🤍 장바구니 페이지에 .. 2022. 3. 28.
[React] Tab 만들고 애니메이션 추가하기 💡 실습 포인트! 💜 Tab 만들기 전에 생각해보기 function Detail(){ return ( 상세정보 리뷰 Q&A 상세정보 내용입니다. 리뷰 내용입니다. Q&A 내용입니다. ) } 3개의 탭으로 구성한다고 가정했을 때, 클릭할 버튼 태그 3개와 버튼을 클릭했을 때 보여줄 내용이 들어갈 div 태그가 3개 있는 UI 라고 생각할 수 있다. 이제 거기서 각 버튼을 누르면 해당 버튼에 맞는 div 태그를 보여주면 된다. 따라서, 몇 번째 버튼을 눌렀는지 state 로 저장해두고, state 에 따라 알맞은 div 박스를 보이도록 혹은 보이지 않도록 처리해주면 된다. 💜 Tab UI 디자인하기 빠른 디자인을 위해서 React Bootstrap 에서 Tabs 를 검색해서 마음에 드는 디자인을 복사하여 D.. 2022. 3. 27.
[React] props 대신 Context API 사용해보기 💡 실습 포인트! 💜 props 대신에 사용할 수 있는 방법 찾아보기 Component 가 여러 개 중첩되어 있으면 props 를 복잡하게 연속으로 사용해야 한다. 만약 이렇게 props 를 연속으로 사용하는 것이 싫다면 Redux 를 사용하든지 Context 문법을 사용하면 된다. 그러면 props 를 전송하지 않고도 하위 Component 들끼리 state 값들을 똑같이 공유하는 것이 가능하다. 다만 중첩된 Component 가 몇 개 없다면 props 를 사용하는 것이 가장 간단하고 편리하다. 💜 Context 문법으로 props 없이 state 공유하기 Context 문법은 모든 하위 Component 들이 props 없이도 state 를 사용할 수 있도록 만들어주는 문법이다. 🤍 Context .. 2022. 3. 27.
[React] 상세 페이지에 재고 데이터 표시하기 💡 실습 포인트! 오늘은 상세 페이지에 재고 데이터를 표시해보았다. 뿐만 아니라 재고 데이터는 주문 및 주문취소의 수에 따라 개수가 유동적으로 변하므로, 이와 유사하게 "주문하기" 버튼을 눌렀을 때 재고 데이터가 감소하도록 구현해보았다. 💜 상세 페이지에 재고 데이터 표시하기 상세 페이지의 "주문하기", "뒤로가기" 버튼 위에 재고 데이터를 표시하기로 했다. 🤍 재고 데이터를 저장할 state 만들기 let [leftAll, setLeftAll] = useState([10, 11, 12]); DB 를 이용해서 구현하는 게 아니기 때문에 최상위 파일인 App.js 파일에 임의로 0번 상품, 1번 상품, 2번 상품의 재고 데이터 array 를 leftAll 이라는 state 에 저장해주었다. 🤍 만들어놓은 .. 2022. 3. 26.
[React] React 에서 Ajax 요청하기_2 💡 실습 포인트! 강사님이 이런 기능을 추가해보는 건 어떨까요? 라고 할 때마다 하나씩 기능을 추가해보았다. 배운 내용을 토대로 혼자서 기능을 모두 오류없이 만들어 추가해서 매우 뿌듯했다. (사진이 제대로 안 나오는 부분은 강사님이 제공해준 데이터라서 어쩔 수 없었다...저거도 직접 구글링하며 만들기엔 공부하고 있는 현재 새벽 5시...) 지금 보니 "로딩에 실패했습니다." 라는 문구보다 "더이상 상품이 없습니다." 로 작성할 걸 그랬다. 수정해둬야지.. 💜 "상품 더보기" 버튼 누를 때마다 다른 경로에서 데이터 받아와서 상품 레이아웃에 추가하기 이 기능은 만들기 전에 강사님이 count 기능을 넣어주면 된다며 약간의 힌트를 주셨다. 강사님이 제공한 데이터 경로는 json 파일명이 1, 2, 3 과 같이.. 2022. 3. 26.
[React] React 에서 Ajax 요청하기 💡 실습 포인트! 이번에는 GET 요청을 통해 받아온 데이터를 가지고 "상품 더보기" 버튼을 눌렀을 때 상품 레이아웃에 해당 데이터들이 추가되도록 만들어보았다. 💜 Ajax 알아보기 Ajax 는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드이다. 서버란 누군가가 특정 URL 로 요청을 하면 데이터를 가져다주는 프로그램 정도로 이해하면 편하다. 요청이란 서버에 GET, POST 등과 같이 요청하는 방법을 의미하는데 사실 웹탐색, 로그인, 검색 등을 GET, POST 요청을 통해 진행한다. GET : 데이터, 웹페이지 같은 것을 읽고 싶을 때 서버에 보내는 요청을 의미하며, 대표적인 GET 요청으로는 브라우저 주소창에 URL 을 입력하는 행위 등이 있다. POST : 데이.. 2022. 3. 26.
[React] useEffect 과제 풀기 💡 실습 포인트! 이번에는 useEffect() 와 setTimeout() 을 사용하여 2초동안만 보여지는 알림창을 만들어보았다. 이전에 부트캠프를 수강할 때에는 useEffect 니 Hook 이니 많이 들어는 봤는데 제대로 된 설명이 없어서, 이해도 하지 못한 상태에서 다음 진도로 넘어가느라 찝찝했었는데 이번 기회를 통해 개념을 알고 확실하게 어떤 때에 사용해야 하는지를 알게 되었다. 💜 알림창 타이머 기능 만들기 // 전체 코드 미리보기 // 전체 코드 내용이 길어서 불필요한 부분은 제외했다. function Detail(props) { let [alert, setAlert] = useState(true); useEffect(()=>{ let timer = setTimeout(()=>{setAlert.. 2022. 3. 26.

티스토리툴바