객체의 bracket notation 활용

Obj의 key값에 대한 value값을 접근함에 있어 우리는 2가지 방법을 사용할 수 있다.
dot notation이랑 bracket notation이다.
여기서 이 둘의 차이점은 bracket notation은 key값을 변수로 활용할 수 있다는 것이다.
근데 이것이 프로젝트에서 쓰일 일이 정말 많았다!
그리고 생각보다 코드의 효율성에서도 큰 도움을 많이 준다....(굉장히 중요한 내용!!)

다음은 bracket notation을 활용한 예시이다.
객체를 활용하여 다중 state을 동시에 관리할 수 있다.

const [signUpInfo, setSignUpInfo] = useState({
    signUpId: '',
    signUpPw: '',
    signUpPwCheck: '',
    signUpEmail: '',
    signUpNick: '',
    signUpPhone: '',
  });
  
    const onChange = e => {
    setSignUpInfo({
      ...signUpInfo,
      [e.target.name]: e.target.value,
    });

SignUp페이지의 컴포넌트의 초기값을 객체로 설정해주고 각 key값에 해당하는 input의 내용을 넣어주었다.
그리고 이 input의 값들을 관리하는 onChange함수를 보면 bracket notation을 활용한 것을 볼 수 있다.
input의 name을 변수로 활용하여 해당 input의 name에 따라 input의 value를 보여주는 객체를 만들어 줄 수 있다.

아래는 fetch를 활용한 함수에 bracket notatation을 활용한 예시이다.

  const signUpInputFetch = () => {
   fetch(`${BASE_URL}users/check-${backname}`, {
     method: 'POST',
     body: JSON.stringify({
       [backname]: value,
     }),
   })
     .then(res => res.json())
     .then(res => {
       if (res.message === 'ALREADY EXISTS') {
         setIsDuplicate(prev => ({ ...prev, [name]: true }));
       }
     });
 };

각 input에 대한 fetch함수를 만들기 위해서 fetch를 보내는 주소와 body의 JSON.stringify에 대해서 변수를 적용해야 했다.
처음에는 당연히 template literal을 사용하면 잘 되겠지 싶었지만..... 이상하게 자꾸 body의 JSON.stringify에는 변수가 적용이 되지 않았다.
근데.... 보니까 이게 객체네....??????
key와 value로 이루어진 객체였다...!!
따라서 bracket notation을 적용해준다.
key값에 backname(백엔드 API 명세서에 해당하는 key name)을 변수로 활용함으로서 해결할 수 있었다.