본문 바로가기
728x90
반응형

리액트59

[리액트] 애니메이션 / 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.
[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.
728x90
반응형

티스토리툴바