21.11.22 JSON 객체와 JS Object의 차이 공부 및 리엑트 객체 state 중복 원소 포함하지 않게 동적 값 넣기

아 진짜.. state로 input입력받는데 안되가지고 짜증나 죽는 줄 알았다.

저 같은 분들 삽질하지 말고 찾아쓰시라고 생각나는 키워드 다 적어서 제목에 적었다.

{'B1':'1', 'B2':'3', 'B3':'5' } 내가 원하는 것

{currQuestionNum: '3'} 나온 결과

 

 

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-JSON%EA%B3%BC-JavaScript-Object%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[개발상식] JSON과 JavaScript Object의 차이점

JSON Object는 JS Engine 메모리 안에 있는 데이터 구조이고, JSON은 객체의 내용을 기술하기 위한 text 파일이라는 점이 다릅니다. JSON은 "파일"이므로 확장자 명이 .JSON인 파일이 존재합니다.

이 메서드를 통해 제가 말하고 싶은 것은 JS Object로 HTTP 통신하는 것이 아니라, JSON으로 서버와 클라이언트가 데이터를 주고 받는다는 것입니다.

우리가 HTTP 통신을 할 때에는 JS Object가 아닌 JSON으로 서버와 클라이언트 데이터를 주고받는 것이기 떄문에 프론트엔드에서 JSON 데이터를 가공하기 위해서는 JS Object로 변경해주는 메소드가 필요한 것이고, 또한 백엔드에 JSON 양식으로 데이터를 보내기 위해서도 메소드가 필요한 것이죠.

• JSON을 JS Object로 파싱하기 위해서 필요한 메소드가 JSON.parse() 메소드라는 것이구요.
• JS Object를 JSON으로 변환해주기 위해 필요한 것이 JSON.stringify() 메소드가 되는 것입니다.

 

JSON 객체와 JS Object의 차이점 

https://kyounghwan01.github.io/blog/JS/JSbasic/jsonDynamicAllocation/

JavaScript - JSON 객체 Key값 동적 할당하기, js, html, css, 웹개발, 개발자, 프론트엔드, 백엔드, web

JSON 객체에 동적으로 할당하기

객체로 만들 부분을 빈 배열로 만들고 []방식으로 프로퍼티를 설정하는 방법을 이용하면 키 값을 동적으로 설정 할 수 있습니다.

https://velog.io/@ym1085/JSON-%EC%82%AC%EC%9A%A9%EB%B2%95

 

const clickHandler = (e) => {
    e.preventDefault();
    setCurrQuestionNum("B" + e.target.name); //'B1'
    console.log(currQuestionNum);
    setCurrUserAnswer(e.target.value); //'1'
    console.log(currUserAnswer);
    if (Object.keys(userAnswerList).includes(currQuestionNum) === false) {
      setUserAnswerList({
        ...userAnswerList,
        currQuestionNum: currUserAnswer,
      });
    }
    console.log(Object(userAnswerList));
}

수정 전

const clickHandler = (e) => {
    e.preventDefault();
    setCurrQuestionNum("B" + e.target.name); //'B1'
    setCurrUserAnswer(e.target.value); //'1'
    let newAnswers = { ...userAnswerList }; //임시 배열
    newAnswers[currQuestionNum] = currUserAnswer; //중복 키 알아서 갱신됨
    setUserAnswerList(newAnswers);
    console.log(currQuestionNum);
    console.log(currUserAnswer);
    console.log(newAnswers);
    console.log(userAnswerList);
    //... 전개연산자 기존의 객체 안에 있는 내용을 해당 위치에 풀어준다. 즉, userAnswerList를 바꾸는 게 아닌 복사해다가 거기에 추가하는 느낌
    //}
  };

수정 후