State

State (상태)

컴포넌트가 관리하는 로컬(내부) 데이터

React 컴포넌트의 상태(State)는 컴포넌트가 관리하는 로컬 데이터입니다. 상태를 사용하면 컴포넌트가 동적인 데이터를 저장하고 표시할 수 있으며, 상태가 변경될 때마다 React는 자동으로 화면을 다시 렌더링합니다.

State 의 특징

상태 초기화
: 컴포넌트가 생성될 때 useState 훅이나 클래스 컴포넌트의 constructor 메서드에서 초기 상태를 설정합니다.

상태 업데이트
: setCount나 this.setState를 사용하여 상태를 업데이트합니다. 이때 이전 상태를 참조하여 변경을 진행하는 것이 중요합니다.

컴포넌트별로 고유한 상태
: 각각의 인스턴스는 자체 상태를 유지하므로, 동일한 컴포넌트의 여러 인스턴스 간에는 각각 독립적인 상태가 존재합니다.

실습 코드

“상품 상세 UI 만들기 - state”

“상품 상세 UI 만들기 - state” 에서는 1~3단계로 나누어 실습합니다. 1단계 - JSX 문법만을 사용하여 ProductDetail.jsx 컴포넌트를 정적 컨텐츠로 디자인합니다. 2단계 - JavaScript 객체를 사용하여, 동적으로 상품 상세 정보를 랜더링 합니다. 3단계 - quantity (수량) 을 상태(state) 로 정의하여, , 버튼을 눌러 이벤트 처리를 하고, 상태변화에 따라 리랜더링하는 과정을 확인합니다.

작업할 파일

•

componets/ProductDetail.jsx

•

App.js

•

App.css

1단계

JSX 문법만을 사용하여 ProductDetail.jsx 컴포넌트를 정적 컨텐츠로 디자인합니다

•

componets/ProductDetail.jsx

•

App.js

•

App.css

컴포넌트 구조

•

App

◦

ProductDetail

App, ProductDetail 컴포넌트

componets/ProductDetail.jsx

import React from 'react'

const ProductDetail = () => {
  
  return (
    <div className='product-detail'>
        <div className="item img">
            <img src="https://i.imgur.com/1vpSkbW.png" alt="상품명" />
        </div>
        <div className="item info">
            <div className="title">
                <h1>상품명</h1>
            </div>
            <p>
                <span className='txt-pt'>INFO</span><br />
                -편안한 착용이 가능한 폴라 디자인 <br />
                -체형 커버가 가능한 베이직한 실루엣 <br />
            </p>
            <p>
                <span className="txt-pt">Color & Size</span> <br />
                Black, Navy, Red <br />
                85, 90, 95, 100, 110 <br />
                - 어깨 53, 가슴 59, 암홀 23, 소매 62, 총장 68 <br />
                (측정 방법에 따라 1~3cm 오차가 있을 수 있습니다) <br />
            </p>
            <span className='line-lg'></span>
            <div className="text-group">
                <div className="item">
                    <span className='txt-pt'>판매가</span>
                </div>
                <div className="item">
                    <span className='txt-pt'>42,000 원</span>
                </div>
            </div>
            <div className="text-group">
                <div className="item">
                    <span>배송비</span>
                </div>
                <div className="item">
                    <span>3,000</span> 원
                </div>
            </div>
            <span className="line-lg"></span>
            <div className="text-group">
                <div className="item">
                    <span>Color</span>
                </div>
                <div className="item">
                    <select name="color" id="color">
                        <option value="Black">Black</option>
                        <option value="Navy">Navy</option>
                        <option value="Red">Red</option>
                    </select>
                </div>
            </div>
            <div className="text-group">
                <div className="item">
                    <span>Size</span>
                </div>
                <div className="item">
                    <select name="color" id="color">
                        <option value="85">85</option>
                        <option value="90">90</option>
                        <option value="95">95</option>
                        <option value="100">100</option>
                        <option value="110">110</option>
                    </select>
                </div>
            </div>
            <div className="text-group">
                <div className="item">
                    <span>수량</span>
                </div>
                <div className="item flex">
                    <input type="text" className='quantity' min={1}  max={100} value={1} />
                    <button className='btn btn-xs'>+</button>
                    <button className='btn btn-xs'>-</button>
                </div>

            </div>
            <span className="line-lg"></span>
            <div className="text-group">
                <div className="item">
                    <span className='txt-pt'>최종 가격</span>
                </div>
                <div className="item">
                    <span className='txt-pt'>42,000</span>
                </div>
            </div>
            <div className="text-group flex gap-1">
                <div className="item">
                    <button className="btn btn-lg">구매하기</button>
                </div>
                <div className="item flex">
                    <button className="btn btn-lg btn-outline">장바구니</button>
                    <button className="btn btn-lg btn-outline">관심상품</button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default ProductDetail
JavaScript
복사

App.js

import logo from './logo.svg';
import './App.css';
import ProductDetail from './components/ProductDetail';



function App() {

  return (
    <div>
      <ProductDetail />
    </div>
  );
}

export default App;
JavaScript
복사

App.css

.txt-pt {
  color: salmon;
  font-weight: bold;
}
.line-lg {
  display: block;
  border-bottom: 2px solid lightgray;
}

.product-detail {
  display: inline-flex;
  justify-content: center;
  column-gap: 100px;
  padding: 10px;
  /* border: 1px solid salmon; */
}

.product-detail .item {
  width: 400px;
}

.product-detail .info {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.quantity {
  width: 40px;  
  font-size: 16px;
  line-height: 20px;
  height: 20px;
  text-align: center;
  appearance: none;
}



/* 공통 */
.text-group {
  display: flex;
  padding: 10px 0;
}

img { width: 100%; }

select {
  width: 100%;
  font-size: 16px;
  line-height: 40px;
  height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  color: #222;
  color: inherit;
  cursor: pointer;
  outline: none;
  border: 1px solid #777;
  background: none;
  border-radius: 0;
  padding-right: 32px;
}

.flex {
  display: flex;
}

.flex.gap-1 {
  gap: 10px;
}


.btn {
  background-color: royalblue;
  color: white;
  font-weight: bold;
  outline: none;
  border: none;
  margin: 0 2px;
  padding: 0 10px;
  cursor: pointer;
}

.btn:hover {
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

.btn:active {
  box-shadow: none;
}

.btn.btn-lg {
  width: 100%;
  min-height: 40px;
}

.btn.btn-outline {
  border: 2px solid gray;
  background-color: white;
  color: gray;
}
CSS
복사

2단계

JavaScript 객체를 사용하여, 동적으로 상품 상세 정보를 랜더링 합니다.

•

componets/ProductDetail.jsx

컴포넌트 구조

•

App

◦

ProductDetail

App, ProductDetail 컴포넌트

componets/ProductDetail.jsx

import React, { useState } from 'react'

const ProductDetail = (props) => {

    // ✅ 객체 추가
    const product = {
        productId : 'p000001',
        name : '베이직 폴라 니트',
        price : 42000,
        quantity : 1,
        img: 'https://i.imgur.com/1vpSkbW.png',
    }

    // ✅ 최종 가격 계산
    const totalPrice = product.price * product.quantity

    return (
        <div className='product-detail'>
            <div className="item img">
                <img src={product.img} alt={product.name} />
            </div>
            <div className="item info">
                <div className="title">
                    <h1>{product.name}</h1>
                </div>
                <p>
                    <span className='txt-pt'>INFO</span><br />
                    -편안한 착용이 가능한 폴라 디자인 <br />
                    -체형 커버가 가능한 베이직한 실루엣 <br />
                </p>
                <p>
                    <span className="txt-pt">Color & Size</span> <br />
                    Black, Navy, Red <br />
                    85, 90, 95, 100, 110 <br />
                    - 어깨 53, 가슴 59, 암홀 23, 소매 62, 총장 68 <br />
                    (측정 방법에 따라 1~3cm 오차가 있을 수 있습니다) <br />
                </p>
                <span className='line-lg'></span>
                <div className="text-group">
                    <div className="item">
                        <span className='txt-pt'>판매가</span>
                    </div>
                    <div className="item">
                        <span className='txt-pt'>{product.price.toLocaleString()} 원</span>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>배송비</span>
                    </div>
                    <div className="item">
                        <span>3,000</span> 원
                    </div>
                </div>
                <span className="line-lg"></span>
                <div className="text-group">
                    <div className="item">
                        <span>Color</span>
                    </div>
                    <div className="item">
                        <select name="color" id="color">
                            <option value="Black">Black</option>
                            <option value="Navy">Navy</option>
                            <option value="Red">Red</option>
                        </select>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>Size</span>
                    </div>
                    <div className="item">
                        <select name="color" id="color">
                            <option value="85">85</option>
                            <option value="90">90</option>
                            <option value="95">95</option>
                            <option value="100">100</option>
                            <option value="110">110</option>
                        </select>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>수량</span>
                    </div>
                    <div className="item flex">
                        <input type="text" className='quantity' value={product.quantity} min={1}  max={100} />  
                        <button className='btn btn-xs'>+</button>   
                        <button className='btn btn-xs'>-</button>  
                    </div>

                </div>
                <span className="line-lg"></span>
                <div className="text-group">
                    <div className="item">
                        <span className='txt-pt'>최종 가격</span>
                    </div>
                    <div className="item">
                        <span className='txt-pt'>{totalPrice.toLocaleString()} 원</span>
                    </div>
                </div>
                <div className="text-group flex gap-1">
                    <div className="item">
                        <button className="btn btn-lg">구매하기</button>
                    </div>
                    <div className="item flex">
                        <button className="btn btn-lg btn-outline">장바구니</button>
                        <button className="btn btn-lg btn-outline">관심상품</button>
                    </div>
                </div>
            </div>
        </div>
    )
    }

export default ProductDetail
JavaScript
복사

3단계

quantity (수량) 을 상태(state) 로 정의하여, , 버튼을 눌러 이벤트 처리를 하고, 상태변화에 따라 리랜더링하는 과정을 확인합니다.

•

componets/ProductDetail.jsx

컴포넌트 구조

•

App

◦

ProductDetail

App, ProductDetail 컴포넌트

componets/ProductDetail.jsx

import React, { useState } from 'react'

const ProductDetail = (props) => {

    // ✅ state 추가
    const [quantity, setQuantity] = useState(1)

    // ✅ 객체 추가
    const product = {
        productId : 'p000001',
        name : '베이직 폴라 니트',
        price : 42000,
        quantity : 1,
        img: 'https://i.imgur.com/1vpSkbW.png',
    }

    // ✅ 최종 가격 계산
    const totalPrice = product.price * quantity

    // ✅ 이벤트 정의 - 증가
    const onIncrease = () => {
        console.log(quantity);
        setQuantity(quantity + 1)
    }
    
    // ✅ 이벤트 정의 - 감소
    const onDecrease = () => {
        console.log(quantity);
        setQuantity(quantity - 1)
    }


  
    return (
        <div className='product-detail'>
            <div className="item img">
                <img src={product.img} alt={product.name} />
            </div>
            <div className="item info">
                <div className="title">
                    <h1>{product.name}</h1>
                </div>
                <p>
                    <span className='txt-pt'>INFO</span><br />
                    -편안한 착용이 가능한 폴라 디자인 <br />
                    -체형 커버가 가능한 베이직한 실루엣 <br />
                </p>
                <p>
                    <span className="txt-pt">Color & Size</span> <br />
                    Black, Navy, Red <br />
                    85, 90, 95, 100, 110 <br />
                    - 어깨 53, 가슴 59, 암홀 23, 소매 62, 총장 68 <br />
                    (측정 방법에 따라 1~3cm 오차가 있을 수 있습니다) <br />
                </p>
                <span className='line-lg'></span>
                <div className="text-group">
                    <div className="item">
                        <span className='txt-pt'>판매가</span>
                    </div>
                    <div className="item">
                        <span className='txt-pt'>{product.price.toLocaleString()} 원</span>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>배송비</span>
                    </div>
                    <div className="item">
                        <span>3,000</span> 원
                    </div>
                </div>
                <span className="line-lg"></span>
                <div className="text-group">
                    <div className="item">
                        <span>Color</span>
                    </div>
                    <div className="item">
                        <select name="color" id="color">
                            <option value="Black">Black</option>
                            <option value="Navy">Navy</option>
                            <option value="Red">Red</option>
                        </select>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>Size</span>
                    </div>
                    <div className="item">
                        <select name="color" id="color">
                            <option value="85">85</option>
                            <option value="90">90</option>
                            <option value="95">95</option>
                            <option value="100">100</option>
                            <option value="110">110</option>
                        </select>
                    </div>
                </div>
                <div className="text-group">
                    <div className="item">
                        <span>수량</span>
                    </div>
                    <div className="item flex">
                        <input type="text" className='quantity' value={quantity} min={1}  max={100} />  {/* value 를 state 로 변경 */}
                        <button className='btn btn-xs' onClick={ onIncrease }>+</button>    {/* 이벤트 추가 */}
                        <button className='btn btn-xs' onClick={ onDecrease }>-</button>    {/* 이벤트 추가 */}
                    </div>

                </div>
                <span className="line-lg"></span>
                <div className="text-group">
                    <div className="item">
                        <span className='txt-pt'>최종 가격</span>
                    </div>
                    <div className="item">
                        <span className='txt-pt'>{totalPrice.toLocaleString()} 원</span>
                    </div>
                </div>
                <div className="text-group flex gap-1">
                    <div className="item">
                        <button className="btn btn-lg">구매하기</button>
                    </div>
                    <div className="item flex">
                        <button className="btn btn-lg btn-outline">장바구니</button>
                        <button className="btn btn-lg btn-outline">관심상품</button>
                    </div>
                </div>
            </div>
        </div>
    )
    }

export default ProductDetail
JavaScript
복사