React

useEffect  말 그대로 Effect를 사용하겠다는 뜻의 Hook 입니다. 화면에 보일 수 있는 데이터를 서버에서 받아올 때 'state' 가 바뀔 때마다 함수를 실행 시키거나 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있습니다. 🚀 학습 목표

form 태그 안에 onSubmit={onSubmit} 을 써서 댓글을 입력하고 게시 버튼을 클릭하거나 엔터를 누를때 댓글창에 쌓이게끔 해주려고 했는데, 엔터키를 누르면 되지만 게시 버튼을 클릭했을 때 실행되지 않았다.알고보니 button에 type을 button 으로

다음의 순서에 맞게 코드를 작성하여 ID, PW <input>에 입력된 값을 state 에 저장해주세요. ID <input> 에서 onChange event 발생 event 발생 시 handleIdInput 함수 실행 handleIdInput 는 이벤트를 인

지금까지 배웠던 리액트 기초 개념을 적용하고 응용하여 훨씬 React 스러운 미니 프로젝트 Monster 과제! :: 최근 작업 주제 (하나 이상의 주제를 선택해주세요.) [x] 기능 추가 [ ] 리뷰 반영 [ ] 리팩토링 [ ] 버그 수정 [ ] 컨벤션

Login | useNavigate Hook 을 이용한 페이지 전환Login | 사용자 입력 데이터 저장Login | 로그인 버튼 활성화 (validation)Main | 댓글 기능Main | 댓글 컴포넌트화 + props로 데이터 전달Main | mock data를

react-router-dom의 Link 를 styled-components 에 적용시키는 방법

Header Nav 클릭시 style 값 변경 path parameter를 이용해 해당 페이지로 url 변경

ES6 에서 도입된 spread 와 rest! 서로 다른 문법이지만 비슷한 형태로 이루어져서 헷갈리기 쉬워 정리해봅니다.'펼치다', '퍼뜨리다' 라는 뜻 그대로 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있습니다.위 코드는 기존의 객체의 속성 등을 건들이지 않고 새

기업협업 프로젝트 중 고객 후기 등록 페이지 구현에 앞서 FormData 란 무엇이며, 이를 어떻게 활용하는 지에 대해 알아보겠습니다! 🥰서버에 POST 보낼 때 file 를 업로드하는 경우! formData 를 사용합니다.FormData는 폼을 쉽게 보내도록 도와주

페이지 주소를 정의할 때, 유동적인 값을 전달해야 할 때가 있습니다. 이는 파라미터와 쿼리로 나뉘어 질 수 있습니다.일반적으로 Path Parameter 는 1가지 정보만 보내줄 때 주로 이용합니다. 위에 처럼 달라지는 부분을 매개변수로 처리해주는 것이 좋습니다. :

kakao map API 를 이용하여 리스트에 있는 숙소들의 위치를 보여주고 해당 숙소의 금액을 보여주기(커스텀 오버레이를 활용)mouseover / mouseout 기능1) Kakao Maps API 라이브러리를 사용하여 Staylist 페이지에 지도 불러오기2) i

다중 필터 : 상수데이터 FILTER_LIST 내 category, value 값을 정해두고 Query parameter 를 이용하여 해당 버튼을 눌렀을 때 url 뒤에 &amenity=1 이렇게 추가될 수 있도록 로직 구현

Slick Slider 라이브러리를 이용하여 이미지 슬라이드 구현 1. Slider Library 설치 2. mock data 로 넘겨받은 images를 StaylistSlider 컴포넌트에서 불러오기 3. slick slider 의 기본 세팅 css 파일을 im

localStorage 와 useState Hook을 사용한 로그인 전역관리실제 구현 모습작성한 코드fetch 함수를 이용하여 위시리스트와 장바구니 상품 목록의 데이터를 불러옴useEffect 에서 해당 함수를 실행 시키고, 의존성 배열 안에 해당 state 값을 넣어

React Query 예제

우측 하단에 React Query 로고(app.tsx 에서 추가해줬던 ReactQueryDevtools)로고를 클릭하면 아래와 같은 화면 나타남 \- 현재 ”posts” 라는 query key 를 가진 쿼리가 stale 상태인 것을 확인할 수 있음 \- stale 상태

Redux 의 store 페이지는 새로고침 할 경우 state 가 날아감ex) application 만들면서 localhost 에 화면 띄우고 작업을 하게 되는데, 이때 새로고침을 눌러보면 application 은 최초의 코드로 돌아감특히, state 에 변화된 내용들

예시) localstorage 는 값으로 string 가능, object 불가능이때 json.stringify 를 통해 object > string ! 이것이 직렬화↔ json.parse (string > object)Redux에서는 function, promise 등