2024년12월19일 - React 와 Spring 의 만남

상품 관리 사이트를 구현

상품 테이블 정의

Spring Boot REST API 구현

React 로 상품 목록 페이지 구현

상품 테이블 정의

상품

Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.

https://www.erdcloud.com/d/5DQHMRPBdEnm8tZtG

DROP TABLE IF EXISTS `products`;

CREATE TABLE `products` (
	`no`	BIGINT	NOT NULL AUTO_INCREMENT PRIMARY KEY	COMMENT 'PK',
	`id`	VARCHAR(64)	NOT NULL	COMMENT 'UK',
	`title`	VARCHAR(100)	NOT NULL	COMMENT '상품명',
	`content`	TEXT	NULL	COMMENT '설명',
	`likes`	BIGINT	NULL	DEFAULT 0	COMMENT '좋아요',
	`img`	TEXT	NULL	COMMENT '이미지경로',
	`created_at`	TIMESTAMP	NOT NULL	DEFAULT CURRENT_TIMESTAMP	COMMENT '등록일자',
	`updated_at`	TIMESTAMP	NOT NULL	DEFAULT CURRENT_TIMESTAMP	COMMENT '수정일자'
);
SQL
복사

Spring Boot REST API 구현

요청 메소드	요청 경로	항목	비고
GET	/products	상품 목록
GET	/products/{id}	상품 조회
POST	/products	상품 등록
PUT	/products	상품 수정
DELETE	/products/{id}	상품 삭제

•

domain

◦

Product.java

•

Mapper

◦

ProductMapper.xml

◦

ProductMapper.java

•

Service

◦

ProductService.java

◦

ProductServiceImpl.java

•

Controller

◦

ProductController.java 

◦

@CrossOrigin("*")

◦

@RestController

▪

 sp-crud

React 로 상품 목록 페이지 구현

클라이언트에서 서버로 비동기 데이터 요청

const CardList = () => {

	// ⭐ state 선언
	// 🧊 productList
	❓❓❓
	
	// 🌞 데이터 요청 함수
	const getProductList = ❓❓❓
	
	// ❔ useEffect() 훅 사용
	// "렌더링 시 호출 되는 함수"
	// : 함수형 컴포넌트에서 마운트, 업데이트, 언마운트 생명주기 작업을 
	//   처리할 수 있도록 해주는 훅
	useEffect(() => {
    getProductList ();
  }, []);
	
  return (
    <div>
      <h1>상품 목록</h1>
      <div style={{
        display: "flex",

      }}>
        {
          productList.map( (card, index) => {
            return <Card key={card.no} card={ card } />
          })
        }
      </div>
    </div>
  )
}

export default CardList
JavaScript
복사