e.target.value와 e.target.name 이해하기[대괄호 표기법 이란?]

https://elecch.tistory.com/553

useState와 불변성()[객체의 일부속성만을 업데이트 : ...()를 자주 사용]

 

위의 링크 예시를 보면 스프레드 연산자로 기존 객체값을 들고오고, 극 객체전체의 일부만을 수정하는 방식으로 setState함수가 쓰인다.

 

아래 코드 또한 state를 통해서 두 state 변수를 한개의 객체로 묶어 준 후에 같이 객체 일부만을 바꿔주는 식으로 사용하고 있다.

const [author, setAuthor] = useState("")

const [content, setContent ] = useState("")

를 아래 코드에서는 state 객체 하나로 묶어서 한번에 관리하고 있다.

 

이 state 객체의 key와 value값 또한 tag의 속성인 name 과 value를 통해서 

계속 객체를 새롭게 생성하며 관리하고 있다.(set함수 안의 스프레드로 전체 객체를 들고 온뒤, 나중에 일부 객체만 변경 )

onChagne={} 또한 함수를 기존에 e 값을 받도록 해서 이벤트가 잘 반영 되도록 하고 있다.

import React, { useState } from 'react'

function DiraryEditor() {

  const [state, setState] = useState({

    author:"",

    content:""

  })

  const handleChangeState = (e) => {

    setState({

      ...state,

      [e.target.name]: e.target.value

    })

  }

  return (

    <div className='DiraryEditor'>

      <h2>오늘의 일기</h2>

      <div class="">

        <input type="text"

          name='author'

          value={state.author}

          onChange={handleChangeState}

        />

      </div>

      <div class="">

        <textarea

        name='content'

        value={state.content}

        onChange={handleChangeState} />

      </div>

    </div>

  )

}

export default DiraryEditor

 

---

보충

handleChangeState 함수는 모든 변경 사항을 처리하는 범용 핸들러 역할을 합니다.

이벤트 객체 e에서 입력 필드의 name과 value 속성을 추출하여 상태를 업데이트합니다.

이벤트 핸들러에서 스프레드 문법(...state)을 사용하여 기존 상태를 복사하고,

대괄호 표기법([e.target.name])을 사용하여 동적으로 속성을 업데이트합니다.

---

대괄호 표기법이란?

 

객체 구조에서 속성이름(키)을 변수명으로 쓰기 위해서 변수명을 [ ]로 감싸주는 것

 

JavaScript에서 객체의 속성(키)을 변수로 사용하고자 할 때, 대괄호 표기법을 사용합니다. 이 방법을 사용하면 변수의 값에 따라 동적으로 객체의 속성명을 결정할 수 있습니다.

예를 들어, 아래와 같이 변수를 사용하여 객체의 키를 동적으로 설정할 수 있습니다:

 

-예시-

let key = 'name';

let value = 'John';

let obj = {

  [key]: value

};

console.log(obj); // { name: 'John' }

 

이 코드에서 obj 객체는 key 변수의 값('name')을 속성명으로 사용하고, value 변수의 값을 그 속성의 값으로 설정합니다. 이렇게 대괄호 표기법을 사용하면, 런타임에 속성명을 결정할 수 있으므로 코드의 유연성이 증가합니다.

 

이 방식은 React에서 상태를 업데이트할 때 특히 유용합니다. 예를 들어, 어떤 이벤트에 따라 다른 상태를 업데이트해야 할 경우, 이벤트 객체에서 속성명을 추출하여 상태를 동적으로 업데이트할 수 있습니다

 

결과적으로, 이 패턴은 기존 상태의 나머지 부분을 그대로 유지하면서 특정 필드만을 업데이트하는 방식으로 동작합니다. 따라서 최종 상태는 전체 객체가 아닌, 변경된 필드만 반영된 새로운 객체 상태가 됩니다.