🪁react/react 실습

react 상품 등록 폼 만들기

하얀성 2024. 1. 12. 15:35

react 상품 등록 폼 만들기

 

onClick, onChange, e.target.value/name 이나 함수 관련 내용을 내것으로 만들기 위해서 간단히 제작.

 

내용 출력 test 완료

 

useRef() 사용해서 input 태그상태 조절해보기

1. useRef() 생성해서 변수에 저장

2. ref={변수}를 원하는 배열에 집어넣어서 제어 -> 자꾸 넣는걸 까먹는다.

 

두 경우 모두, useRef는 렌더링 사이에도 값이 유지되는 "상자"처럼 작동합니다. 그러나 대부분의 사용 사례에서는 DOM 요소를 참조하기 위해 null로 초기화하는 것이 일반적입니다. useRef는 리렌더링을 발생시키지 않으며, .current 속성을 통해 현재 참조된 값을 얻을 수 있습니다.

원하는 만큼 조건이 안되면 focus를 통해서 신규구입 submit이 불가함.

const 상품코드Input = useRef(null);
  const 상품단가Input = useRef(null);
  const 상품수량Input = useRef(null);
const handleSubmit = () => {
    if(state.상품코드.length < 3){
      상품코드Input.current.focus();
      return;
    }
    if(state.상품단가 < 100){
      상품단가Input.current.focus();
      return;
    }
    if(state.상품수량 < 1){
      상품수량Input.current.focus();
      return;
    }
    alert('신규 구입 입력완료')
    console.log(state)
  }

 

ref={상품코드Input}
ref={상품단가Input}
ref={상품수량Input}

input  내용 List에 전달해서 추가하기  

2개의 재고가 input에서 출력되었고, 저장된 상태로 콘솔창에 띄워놓았다.

 

<h4>{ListData.length}의 재고가 있습니다.</h4>

input 데이터를 추가하기 위해서 코드를 작성중 모르는 부분이 나왔다.

onCreate(state.상품코드, state.상품이름 , state.상품단가 , state.상품수량)
const onCreate = (상품코드, 상품이름, 상품단가, 상품수량) => {
    const newItem = {
      상품코드,
      상품이름,
      상품단가,
      상품수량
    }
    setData([newItem, ...data])
  }

 

이렇게 매개변수로 전달한 값이 바로 객체에 저장된다고? 

=> 된다.

이것이 바로. 속성 단축

 

속성 단축(Property Shorthand)은 ES6에서 도입된 자바스크립트 문법으로, 객체 리터럴을 생성할 때 속성의 키(key)와 값을 할당하는 변수의 이름이 같을 경우, 코드를 더 간결하게 작성할 수 있게 해줍니다.

 

속성 단축(Property Shorthand)이란?

속성 단축을 사용하면, 객체 리터럴에서 키와 값을 할당하는 변수가 같은 이름을 가질 때, 키:값 쌍을 한 번만 쓰면 됩니다. 즉, { key: key } 대신 { key }만 써도 됩니다.

 

 

매개변수 값들은 키에 저장되나요, value(값)에 저장되나요?

함수의 매개변수로 받은 값들은 객체 생성 시 해당 키의 값으로 저장됩니다.

 function createDiaryEntry(상품코드, 상품이름, 상품단가) {
    return {
      상품코드, // 여기서 '상품코드'는 키이고, 매개변수 '상품코드'의 값이 여기에 저장됩니다.
      상품이름, // 여기서 '상품이름'는 키이고, 매개변수 '상품이름'의 값이 여기에 저장됩니다.
      상품단가  // 여기서 '상품단가'은 키이고, 매개변수 '상품단가'의 값이 여기에 저장됩니다.
    };
  }

 

객체 구조 분해 할당을 통한 '객체리스트.map(({함수 속성})=>(<div>{함수속성}<div>))'으로 객체 데이터 추출

코딩 테스트 때 객체 출력에 굉장히 애먹던 적이 많아서 객체 관련해서 정리를 하게되었다.

데이터 객체 구조 분해 할당으로 각 추출해서 출력

import React from 'react'

function BudgetList({ ListData }) {
  return (
    <div className='BudgetList'>
      <h2> 재고 리스트</h2>
      <h4>{ListData.length}의 재고가 있습니다.</h4>
      <div class="">
        {ListData.map(({상품코드, 상품이름, 상품단가, 상품수량}) => (
              <div className='DiaryItem'>
               <div className='info'>
                <span>상품코드: {상품코드} | 상품이름: {상품이름} | 상품단가: {상품단가} | 상품수량: {상품수량}
                </span>
              </div>
        </div>
        ))}
      </div>
    </div>
  )
}
객체의 일부 값을 map 함수를 사용하여 처리할 때, 일반적으로 객체의 키(속성 이름)를 매개변수로 사용합니다.
 
이는 객체 구조 분해 할당(destructuring)을 통해 수행됩니다.

 

객체 구조 분해 할당은 객체의 특정 속성을 변수로 직접 추출할 수 있게 해주는 JavaScript의 기능입니다. 이를 사용하면 각 객체의 속성을 쉽게 추출하여 사용할 수 있습니다.

 

log({ 키속성 } )으로 출력 => {key: value } 형태로 출력

const ListData = [
  { 상품코드: '001', 상품이름: '키보드', 상품단가: 50000, 상품수량: 10 },
  { 상품코드: '002', 상품이름: '마우스', 상품단가: 25000, 상품수량: 15 },
  // ... 기타 등등
];

ListData.map(({ 상품코드, 상품이름, 상품단가, 상품수량 }) => {
  console.log({상품코드})
});

 

log(키속성)  으로 출력 => value 값만 출력

 

List 컴포넌트, props로 옮기기.

Listdata 전체가 it의 인자로 받아져서 다시 {...인자}로 감싸져서 나가진다.

<div class="">
        {ListData.map((it)=>(
          <BudgetItem key={it.상품코드} {...it}/>
        ))}
      </div>

 

import React from 'react'

function BudgetItem({상품코드, 상품이름, 상품단가, 상품수량}) {
  return (
    <div className='BudgetItem'>
      <div className='info'>
            <span>상품이름: {상품이름} | 상품단가 : {상품단가}
            </span>
            <br />
            <span> 상품수량: {상품수량}</span>
          </div>
    </div>
  )
}

export default BudgetItem

 

 

<div class="">
        {ListData.map((it)=>(
          <BudgetItem key={it.상품코드} {...it}/>
        ))}
      </div>

 

이러면 it 은 ListData의 인자로서 속성값: value 이런식으로 옮겨지나?

 

그럼 다시 it을 굳이 {...it}을 해줘서 감싸주는 이유가 뭐지?

 

그리고 이번건 props 할때 왜 it={...it} 이런식으로 안해줘도 되는거지?

 

 
미래의 나.
 
아... 객체 전체를 모아서 보내는게 아니라 map이 it으로 객체 각 인자 하나씩 골라내서 props로 계속 보내는 거
그래서 객체를 인자를 보내는 거니까  전개연산자를 쓴거고

 

 

이 코드는 React에서 배열의 각 요소를 컴포넌트로 변환하는 방법을 보여줍니다. 여기서 ListData.map((it) => (...))는 ListData 배열의 각 요소를 it이라는 변수로 순회하면서, 각 요소를 BudgetItem 컴포넌트의 prop으로 전달합니다.

it의 역할

it는 ListData 배열의 각 요소를 나타냅니다. 예를 들어, ListData가 다음과 같은 객체의 배열이라고 가정해 봅시다

 

[
  { 상품코드: '001', 상품이름: '키보드', 상품단가: 50000, 상품수량: 10 },
  { 상품코드: '002', 상품이름: '마우스', 상품단가: 25000, 상품수량: 15 }
  // ... 기타 등등
];

 

map 함수가 실행될 때, it는 배열의 각 객체를 차례대로 가리킵니다.

 

여기 setData()를 자세히봐보자.

괜히 []로 객체들을 감싸서 객체를 갱신시켜주는게 아니였다.  와....

 

const [data, setData] = useState([])
  const onCreate = (상품코드, 상품이름, 상품단가, 상품수량) => {
    const newItem = {
      상품코드,
      상품이름,
      상품단가,
      상품수량
    }
    setData([newItem, ...data])
  }

 

전개 연산자(...)의 역할과 사용 이유에 대해 정리

 

 

객체의 각 속성을 개별 props로 전달하기 위해 사용:

  1. map 함수를 사용할 때, it은 ListData 배열의 각 객체를 나타냅니다. <BudgetItem key={it.상품코드} {...it}/>에서 ...it는 전개 연산자를 사용하여 it 객체의 모든 속성(키-값 쌍)을 BudgetItem 컴포넌트의 개별 props로 전달합니다.

전개 연산자(...) 사용의 이유:

  1. 전개 연산자를 사용하면 각 속성을 개별적으로 나열할 필요 없이, 객체의 모든 속성을 한 번에 컴포넌트의 props로 전달할 수 있습니다. 이 방식은 코드를 더 간결하고 명확하게 만듭니다.

 

it={...it} 대신 {...it}를 사용하는 이유:

  1. it={...it} 형태를 사용하면, 모든 속성이 it라는 단일 prop에 객체로 전달됩니다. 반면, {...it}를 사용하면 각 속성이 개별적인 prop으로 전달됩니다. 이렇게 되면 BudgetItem 컴포넌트 내에서 this.props.상품코드, this.props.상품이름 등과 같이 직접 각 속성에 접근할 수 있게 됩니다. 이는 컴포넌트의 사용성과 가독성을 높여줍니다.