묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드가 아닌 antd Table을 이용해서 하려는데 도와주세요ㅠㅠ
안녕하세요, 선생님. 선생님 수업 기본강의부터 쇼핑몰만들기까지하여 여러번 수강중인 학생입니다. 천천히 너무 자세하게 알려주셔서 많은 도움이 되고 있습니다 :) 제가 이 수업을 들으면서 목표한게 있는데요, 회사의 재고장을 실시간으로 확인할 수 있도록 웹기만으로 만드는 것이었습니다. 그래서 선생님 수업들으면서 이것저것 응용하고 바꿔가며 만들고 있는데요~ 문제에 봉착했습니다 ㅠㅠ ANT Design 사용하여 Card사용을 하셨는데, 저는 Table을 사용하려고 하여 쭉 코드를 작성하였습니다. 총 업로드를 5개를 하였는데, 칸은 5개가 생겼는데 테이블 안에 내용은 보이지 않아서요 ㅠㅠ 어디가 잘못된 걸까요... 컨솔창 키면 정상적으로 상품정보가 랜딩페이지로 넘어오는데 표기가 안되고 있어요. 제가 작성한 코드는 아래와 같습니다. import React, { useEffect, useState } from 'react' import { FaCode } from "react-icons/fa"; import axios from "axios"; import { Card, Button, Col, Row, Table } from 'antd'; import { SketchOutlined } from '@ant-design/icons'; function LandingPage() { const [Products, setProducts] = useState ([]); useEffect(()=> { axios.post('/api/product/products') .then(response => { if (response.data.success) { setProducts(response.data.productInfo) } else { alert("상품을 가져오는데 실패하였습니다.") } }) }, []) const data = Products.map ((product, index) => ( [{ item: product.item, grade: product.grade, price: product.price, box: product.box, key: '1' }] )) const columns = [ { title: '품명', dataIndex: 'item', key:'key', render: item =>{ return <a>{item}</a> } }, { title: '등급', dataIndex: 'grade', key:'key' }, { title: '수량', dataIndex: 'box', key:'key' }, { title: '가격(원)', dataIndex: 'price', key:'key' } ] console.log('products', Products) return ( <div style={{ width: '75%', margin: '3rem auto' }}> <div style={{ textAlign: 'center' }}> <h2> 재고자료 <SketchOutlined /></h2> <h3>재고 LIST</h3> </div> {/* Filter */} {/* Search */} {/* Table */} <Table dataSource={data} columns={columns} /> <br /> <br /> <div style={{ display: 'flex', justifyContent: 'center' }}> <Button type="primary">See More</Button> </div> </div> ) } export default LandingPage 번거로우시겠지만, 알려주시면 너무 감사드리겠습니다ㅠㅠ
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
className 설정 질문
안녕하세요 🙋♂️25:15초에서 아래와 같이 className을 선언해도 될꺼 같은데 className을 배열로 선언하신 이유를 알고 싶습니다. <button className={`MyButton MyButton_${type}`} >
-
미해결
React alert창 띄운 후 확인 버튼 누르면 값 갱신 안되게 하는 방법ㅠㅠ
안녕하세요, react로 웹 페이지를 제작 중입니다. 다름이 아니라 3개 이상 선택하면 alert창으로('3개까지만 선택 가능합니다')라고 띄우는 것 까지는 썼는데 이제 확인을 누르면 4개도 다시 클릭이 되더라구요.. 이걸 막는 방법은 뭐가 있을까요..? 관련된 함수랑 코드를 써놓겠습니다..! const [number, setNumber] = useState(0); const increaseNumber = ()=>{ setNumber(number+1) }; const decreaseNumber = () => { // number의 값을 감소시키는 함수 setNumber(number - 1); }; const over3=()=>{ if (number>=3){ alert('3개까지만 선택 가능합니다!'); } } //onClick에 카운트 세는 함수 설정되어있습니다. <div className='movieposter'> {datas.map((movie, i)=>( movie.value === true ? <img className='img-responsive_clicked' src="https://movie-phinf.pstatic.net/20220214_120/1644825641315cvVKI_JPEG/movie_image.jpg?type=f125" alt={i} onClick={() => {decreaseNumber();handleClickImage(i);}} /> : <img className='img-responsive' src='img/movie_image1.jpg' alt={i} onClick={() => {increaseNumber(); handleClickImage(i);over3()}}/> ))} </div>
-
미해결
리액트 화면 잘림
세로가 길면 화면이 잘리는 현상이 있는데 어떻게 해결해야 될까요?