동적이름을 속성으로 정하고 싶을 때 쓰는 []

개인 프로젝트를 하다가 동적이름을 속성으로 정하고싶을 떄 [] 이거를 쓰라는 내용을 인터넷에서 찾았다.

import "./newProduct.css";

export default function NewProduct() {

  const [inputs, setInputs] = useState({});

  const [file, setFile] = useState(null);

  const [cat, setCat] = useState([]);

  //NOTE: Take previous one and return the new one

  const handleChange = () => {

    setInputs(prev=>{

      return {...prev, [e.target.name]: e.target.value}

    })

  }

  const handleCategories = () => {}

 

  //NOTE: 1개 파일이라서 [0] 인덱스 설정

  return (

    <div className="newProduct">

      <h1 className="addProductTitle">New Product</h1>

      <form className="addProductForm">

        <div className="addProductItem">

          <label>Image</label>

          <input type="file" id="file" onChange={e=>setFile(e.target.files)[0]}/>  

        </div>

        <div className="addProductItem">

          <label>Title</label>

          <input type="text" placeholder="Apple Airpods" onChange={handleChange} />

        </div>

        <div className="addProductItem">

          <label>Description</label>

          <input type="text" placeholder="description" onChange={handleChange} />

        </div>

        <div className="addProductItem">

          <label>Price</label>

          <input type="text" placeholder="100" onChange={handleChange} />

        </div>

        <div className="addProductItem">

          <label>Categories</label>

          <input type="text" placeholder="jeans, skirts" onChange={handleCategories/>

        </div>

        <div className="addProductItem">

          <label>Stock</label>

        <select>

          <option value="true">YES</option>

          <option value="false">NO</option>

        </select>

        </div>

        <button className="addProductButton">Create</button>

      </form>

    </div>

  );

}

 

 

 

 

🎈 이벤트 객체에서 e 전달받음

🎈 e.target.name: 해당 이벤트가 발생한 요소의 name 속성을 가져옵니다. 이 부분에서 [e.target.name]은 동적 속성 이름(dynamic property name)을 사용하고 있습니다. 이는 ES6의 계산된 속성 이름(computed property name) 문법입니다. 이렇게 함으로써 여러 필드에 대한 상태를 관리할 수 있습니다.

🎈

...prev 부분은 이전 상태의 내용을 그대로 가져와서 복사하는 부분입니다. 여기서 { [e.target.name]: e.target.value } 부분이 추가되어 새로운 필드를 가진 객체를 만듭니다.

따라서 이 두 부분이 합쳐져서 전체적으로 이전 상태를 복사하면서 새로운 필드를 추가한 상태를 만들어줍니다. 결국, setInputs 함수는 하나의 객체를 반환하게 되며, 이 객체는 이전 상태의 내용을 그대로 가지면서 새로운 필드가 추가된 상태가 됩니다

🎈 콤마를 사용해서  ,를 사용하여 이전 상태의 내용과 새로운 필드를 가진 객체를 합치고 있습니다.

 

  //NOTE: Take previous one and return the new one

  const handleChange = () => {

    setInputs(prev=>{

      return {...prev, [e.target.name]: e.target.value}

    })

  }

 

🎈 스프레드 연산자 잘못 이해하고 있었던 것 (불변성을 위해서 렌더링할 때 예측못하는 문제 생길 수도 있어서) 

1. prev: 이전 상태를 나타내는 변수로서, 예를 들어 { name: 'John', age: 25 }와 같은 객체일 것입니다.
2. { ...prev }: 이것은 스프레드 연산자(...)를 사용하여 객체를 복사하는 표현입니다. 이전 상태 prev의 속성들을 펼쳐서 새로운 객체를 만들어내는 것입니다.

예를 들어, prev가 { name: 'John', age: 25 }라면 { ...prev }는 새로운 객체를 생성하여 { name: 'John', age: 25 }와 동일한 속성들을 가지게 됩니다. 이것을 "얕은 복사(shallow copy)"라고 합니다. 기존 객체의 속성들을 그대로 가져와서 복사한 것이므로, 새로운 객체를 수정해도 기존 객체에는 영향을 주지 않습니다.

따라서 { ...prev, [e.target.name]: e.target.value }에서는 prev 객체의 내용을 그대로 가져오면서, 새로운 필드를 추가한 객체를 만들고 있습니다. 이렇게 만들어진 객체는 이후 setInputs 함수를 통해 React 컴포넌트의 상태로 설정되어 컴포넌트를 업데이트합니다.

쉽게 말하면, prev 객체의 내용을 그대로 복사한 새로운 객체를 만들고, 그 객체에 새로운 필드를 추가하여 새로운 상태로 업데이트하는 것이죠.

 

📌총정리

이전 상태 복사한 객체 + 계산된 속성이름 사용한 객체 이걸 콤마로 합친다 (연결한다)