<div id="readability-page-1" class="page"><div><h2 id="-들어가며">💡 들어가며</h2>
<blockquote>
React 에서 객체를 생성할 때 동적으로 key 값 할당하는 방법에 대해 정리했습니다 🤔
React 에서 서버에 객체를 전송할 때 (post) 사용자가 입력한 값을 객체의 value 로 저장하고 동적으로 key 값을 할당하는 방법에 관해 공부했습니다.
아래 예시 코드는 Next.js, TypeScript 를 사용한 프로젝트에서 작성한 코드입니다.
</blockquote>
 
<hr>
 
<h2 id="1-동적으로-key-값-설정하는-방법-">1. 동적으로 key 값 설정하는 방법 🚀</h2>
<h3 id="1-1-객체-생성과-동시에-동적인-key-값-설정하기-">1-1. 객체 생성과 동시에 동적인 key 값 설정하기 ✨</h3>
answer 객체를 생성하면서 동시에 progress 변수를 객체의 동적인 key 값 설정에 사용했습니다.
<code>[`answer${progress + 1}`]</code> 가 객체의 key 값을 할당하는 코드입니다.
<code>data</code> 는 value 값을 할당하는 코드입니다.
<pre><code>const [progress, setProgress] = useState(0);

let answer = {
 [`answer${progress + 1}`] : data;
};</code></pre>
<h3 id="1-2-객체-생성-후-동적인-key-값-설정하기-">1-2. 객체 생성 후 동적인 key 값 설정하기 🔥</h3>
answer 객체를 미리 생성한 후 value 값을 할당할 때 동적으로 key 값을 설정했습니다.
<code>answer[`answer${progress + 1}`]</code> 가 객체의 key 값을 할당하는 코드입니다.
<code>data</code> 는 value 값을 할당하는 코드입니다.
<pre><code>const [progress, setProgress] = useState(0);

let answer = { };
 
answer[`answer${progress + 1}`] = data;</code></pre>
 
<hr>
 
<h2 id="2-프로젝트-적용-코드-">2. 프로젝트 적용 코드 💻</h2>
<a href="https://github.com/mnxmnz/colfume-frontend/blob/develop/components/test/questions/AnswerList.tsx">Github 링크 😺</a>
<blockquote>
answer 객체를 미리 생성한 코드입니다.
사용자가 입력한 값 순서대로 answer1, answer2, answer3 ... key 값을 생성했습니다.
answer 뒤 숫자는 현재 진행 상황인 progress 변수를 사용했습니다.
value 에 사용자가 입력한 값을 담은 data 변수를 할당했습니다.
</blockquote>
<pre><code>const [progress, setProgress] = useState(0);

const onClickAnswer = async data =&gt; {
 answer[`answer${progress + 1}`] = data;
 setProgress(progress =&gt; progress + 1);

 if (progress === 6) {
 try {
 const testData = await testResult(answer);
 setResult(testData);
 } catch (e) {
 return e;
 }

 restartTest();
 }
};</code></pre>
 
<hr>
 
<h2 id="-마치며">👏 마치며</h2>
<blockquote>
동적으로 key 값 할당하는 방법을 예제와 함께 정리했습니다 🔮
1. 동적으로 key 값 설정하는 방법 🚀 
2. 프로젝트 적용 코드 💻
</blockquote>
 
<hr>
 
<h4 id="참고-자료-">참고 자료 📩</h4>
<a href="https://blog.outsider.ne.kr/675">JSON 생성시 Key값을 동적으로 할당하기</a>
<a href="https://medium.com/@trustyoo86/react%EC%97%90-typescript-%EC%A0%81%EC%9A%A9%EC%8B%9C-styled-components-%EC%9D%B4%EC%8A%88-bd365de17e13">[JavaScript] JS객체 생성 시 key값 동적으로 할당하는 방법</a></div></div>

mnz.log

💡 들어가며
React 에서 객체를 생성할 때 동적으로 key 값 할당하는 방법에 대해 정리했습니다 🤔
React 에서 서버에 객체를 전송할 때 (post) 사용자가 입력한 값을 객체의 value 로 저장하고 동적으로 key 값을 할당하는 방법에 관해 공부했습니다.
아래 예시 코드는 Next.js, TypeScript 를 사용한 프로젝트에서 작성한 코드입니다.
1. 동적으로 key 값 설정하는 방법 🚀
1-1. 객체 생성과 동시에 동적인 key 값 설정하기 ✨
answer 객체를 생성하면서 동시에 progress 변수를 객체의 동적인 key 값 설정에 사용했습니다.
[`answer${progress + 1}`] 가 객체의 key 값을 할당하는 코드입니다.
data 는 value 값을 할당하는 코드입니다.
const [progress, setProgress] = useState(0);
let answer = {
    [`answer${progress + 1}`] : data;
};
1-2. 객체 생성 후 동적인 key 값 설정하기 🔥
answer 객체를 미리 생성한 후 value 값을 할당할 때 동적으로 key 값을 설정했습니다.
answer[`answer${progress + 1}`] 가 객체의 key 값을 할당하는 코드입니다.
data 는 value 값을 할당하는 코드입니다.
const [progress, setProgress] = useState(0);
let answer = { };
answer[`answer${progress + 1}`] = data;
2. 프로젝트 적용 코드 💻
Github 링크 😺
answer 객체를 미리 생성한 코드입니다.
사용자가 입력한 값 순서대로 answer1, answer2, answer3 ... key 값을 생성했습니다.
answer 뒤 숫자는 현재 진행 상황인 progress 변수를 사용했습니다.
value 에 사용자가 입력한 값을 담은 data 변수를 할당했습니다. 
const [progress, setProgress] = useState(0);
const onClickAnswer = async data => {
  answer[`answer${progress + 1}`] = data;
  setProgress(progress => progress + 1);
  if (progress === 6) {
    try {
      const testData = await testResult(answer);
      setResult(testData);
    } catch (e) {
      return e;
    }
    restartTest();
  }
};
👏 마치며
동적으로 key 값 할당하는 방법을 예제와 함께 정리했습니다 🔮
1. 동적으로 key 값 설정하는 방법 🚀
2. 프로젝트 적용 코드 💻
참고 자료 📩
JSON 생성시 Key값을 동적으로 할당하기
[JavaScript] JS객체 생성 시 key값 동적으로 할당하는 방법

[React] 객체 생성할 때 동적으로 key 값 할당하는 방법

댓글