본문 바로가기
728x90

리액트67

장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치 보호되어 있는 글 입니다. 2024. 6. 1.
props 싫으면 Context API 써도 됩니다 보호되어 있는 글 입니다. 2024. 5. 31.
멋있게 컴포넌트 전환 애니메이션 주는 법 (transition) 보호되어 있는 글 입니다. 2024. 5. 29.
[리액트] 탭 UI 생성 (state 활용) / props 축약 / if 문 생략 탭 UI 생성1. html css로 디자인 미리 완성해놓고2. UI의 현재 상태를 저장할 state 하나 만들고 (버튼)3. state에 따라서 UI가 어떻게 보일지 작성 (환경)1. html css로 탭 디자인 미리 완성Detail.js 에서 >> 버튼0 버튼1 버튼2 react-bootstrap 사이트에서 복사해서 Detail 페이지 넣기.import { Nav } from "react-bootstrap";갖다 쓰려면 import 필수. 버튼마다 event key를 잘쓰라고 돼있음 작명을 각각 다른이름으로 함. defaultActiveKey (옵션으로 사용 가능)= 기본으로 눌려있을 버튼  이벤트 키 (  event key )중에 아.. 2024. 5. 29.
[JS/리액트] Ajax 한 눈에 보기 ( jquery / axios 의 공통점과 차이점) AJAX요청 JS - jQuery 로 요청$.get('https://codingapple1.github.io/hello.txt').done(function(){ });리액트 - axios 로 요청 axios.get("https://codingapple1.github.io/shop/data2.json").then(function(){ });axios.get("https://codingapple1.github.io/shop/data2.json").then(() => { });jQuery의 $.get와 Axios의 axios.get의 공통점공통점 >.done 아니면 .then 뒤에 붙이고 콜백함수넣고 파라미터(data - 작명 자유롭게) 하나 만들기$.get('https://codingapple1.github.. 2024. 5. 28.
[리액트] ajax(get/post), fetch ajax 사용하기AJAX로 GET/POST 요청서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능 사용 전 준비 >>button 생성 {/* 메인페이지 */} {/* 맵 함수 사용 */} {shoes.map((a, i) => { // 컴포넌트 사용 return ; })} {/* ajax 버튼 생성 */} .. 2024. 5. 28.
728x90