본문 바로가기
728x90
반응형

코딩애플170

[리액트] Redux 설치와 사용 (state 보관 / 갖고 오기 / 추가 ) 장바구니 페이지만들기 {/* Redux - 장바구니 페이지 만들기 */} }>라우트 사용해서 장바구니 페이지 생성 가능.장바구니 안에 들어갈 내용은 속성 element 사용해서 적어줌 리액트 부트스트랩 사용해서 element 에 들어갈 html 생성 - 리액트 부트스트랩 import 필수import { Table } from "react-bootstrap";function Cart() { return ( # 상품명 수량 변경하기 1 안녕 .. 2024. 6. 6.
[리액트] 애니메이션 / div 그룹화 / 클래스 중복 / cleanUp function 활용 div 그룹화 - 클래스명을 내용마다 다 일일이 부착을 해야 애니메이션이 보임. function TabContent({ 탭 }) { return [내용0, 내용1, 내용2][ 탭 ];}컴포넌트 사용해서 if 문 생략한 코드function TabContent({ 탭 }) { return ( {[내용0, 내용1, 내용2][탭]} );}  애니메이션 만들기- 투명도가 0에서 1로 서서히 증가하는 애니메이션  1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가4. 원할 때 2번 탈부착1. 애니메이션 동작 전2. 애니메이션 동작 후 className 만들기 .start { opac.. 2024. 6. 5.
[리액트] 데이터 바인딩 차이 ( 변수 / 컴포넌트 ) 변수 데이터 바인딩다른 js 파일에 있는 html 데이터 바인딩다른 파일로 빼서 변수에 담은 후, export let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000, }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000, }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000, },];export default data;다른 파일 생성 후, array 배열 데이터를 변수.. 2024. 6. 4.
Redux 3 : store의 state 변경하는 법 보호되어 있는 글 입니다. 2024. 6. 3.
Redux 2 : store에 state 보관하고 쓰는 법 보호되어 있는 글 입니다. 2024. 6. 2.
장바구니 페이지 만들기 & 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 (옵션으로 사용 가능)= 기본으로 눌려있을 버튼이벤트 키 중에 아무거나 집어넣기 = link0.. 2024. 5. 29.
728x90
반응형