728x90 반응형 > 메모65 [리액트] 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. [리액트] 탭 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. [리액트] ajax(get/post), fetch ajax 사용하기AJAX로 GET/POST 요청서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능사용 전 준비 >>button 생성 {/* 메인페이지 */} {/* 맵 함수 사용 */} {shoes.map((a, i) => { // 컴포넌트 사용 return ; })} {/* ajax 버튼 생성 */} .. 2024. 5. 28. [리액트] Lifecycle / useEffect(훅) / clean up function Lifecycle- 컴포넌트 인생주기- 컴포넌트 인생 중간중간에 간섭 1. 생성 (mount)2. 재렌더링(update)3. 삭제 (unmount)간섭 방법 >>= 갈고리(훅) 달아서 간섭 갈고리 다는 법(구버전)class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 삭제되기전에 실행할 코드 }} 갈고리 다는 법(요즘 버전)- useEffect 함수 useEffect 함수 사용 방법 - import.. 2024. 5. 27. [리액트] 외부 페이지 데이터바인딩 / URL 파라미터 문법 / useParams() 상세페이지(Detatil.js) 에 상품명 넣기 상품명 - shoes state = function App (App.js) 에 존재. 상세페이지(Detatil.js) 에 상품명 넣기.= props 사용// Detail.jsfunction Detail(props) { return ( 상품명 상품설명 120000원 주문하기 );}export default Detail;상품명 데이터 바인딩해주기.///detail 접속시 html 이쁜거 보여달라function Detail(props) { return ( .. 2024. 5. 27. [리액트] 외부 파일 컴포넌트 넣기 / useNavigate() / nested routes / Outlet detail 접속시 보여주고 싶은 html 보여주기 - 다른파일로 뺀 다음 거기서 컴포넌트를 만들어서 넣기. {/* 디테일 페이지 */} 상세페이지임} />저기 element 속성 부분에 컴포넌트 예정.= element 속성 부분= element={ }컴포넌트 생성- 함수쓰고 return 문 써주기.///detail 접속시 html 이쁜거 보여달라function Detail() { return ( 상품명 상품설명 120000원 주문하기 );}export default Detail;- Detail.js 파일 sr.. 2024. 5. 26. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형
