Today I learned
๊ฐ์ฒด ๊ตฌ์กฐ๋ถํด ํ ๋น์ ํ ๋๋ const { value } = e.target
์ด๋ฐ์์ผ๋ก ์ฌ์ฉํด์คฌ๋ค.
ํ์ง๋ง ๋ฐฐ์ด์ ์ด๋ป๊ฒ ์ฌ์ฉํด์ผํ๋์ง ๋ชฐ๋๋๋ฐ ์ด๋ฒ๊ธฐํ์ ๋ฐฐ์ธ ์ ์์๋ค.
๋ฐฐ์ด๊ตฌ์กฐ๋ถํด ํ ๋น์ ํ์ง ์์์ ๋ ์ฝ๋
const career = radioValue.career.split('~')[0];
์ด๋ฐ์์ผ๋ก ๋งจ๋ค์ ๋ฐฐ์ด์ ๋ช๋ฒ์งธ ์์์ธ์ง ์ ํด์คฌ๋ค.
ํ์ง๋ง, ๊ตฌ์กฐ๋ถํด ํ ๋น์ ํด์ฃผ๋๊ฒ ํจ์ฌ ํธํ๋ค.
๋ฐฐ์ด ๊ตฌ์กฐ๋ถํด ํ ๋น์ ํ ์ฝ๋
const [career] = radioValue.career.split('~');
๊ตฌ์กฐ๋ถํด ํ ๋น์ ํ ์ฒซ๋ฒ์งธ ๋ณ์๋ ๋ฐฐ์ด์ ์ฒซ๋ฒ์งธ ์ธ์๋ฅผ ๊ฐ๋ฅดํค๊ณ ๊ทธ ๋ค์์ ์จ์ฃผ๋ฉด ๋๋ฒ์งธ ์ธ์๋ฅผ ๊ฐ๋ฅดํจ๋ค. ์์ฃผ ํธํ ๋ฐฉ๋ฒ์ด๋ค. ๊ฐ๋จํ๊ฑฐ๋๊น ๊ธฐ์ตํด์ผ์ง !
๐ ๋งตํ
์ด๋ค ์กฐ๊ฑด์ ์ํด์ ์์ฑ ๊ฐ์ด ๋ฌ๋ผ์ ธ์ผํ๋ ๊ฒฝ์ฐ ๋๋ ํญ์ if else ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ค.
์ค์ผ ์ ์๋ ๋ถ๋ถ์์๋ ์ค์ฌ์ค์ผํ๋๋ฐ ๊ทธ ๋ฐฉ๋ฒ์ ์ ๋๋ก ์ฌ์ฉํ์ง ๋ชปํ๋๊ฒ ๊ฐ๋ค.
๋งตํํ๊ธฐ ์ ์ฝ๋
if (answer.name === '0') {
setRadioValue({ ...radioValue, gender: answer.id });
} else if (answer.name === '1') {
setRadioValue({ ...radioValue, age: answer.id });
} else {
setRadioValue({ ...radioValue, career: answer.id });
๋ฑ ๋ด๋ ์ด ์ฝ๋๋ ๊ต์ฅํ ํจ์จ์ ์ด์ง ๋ชปํ๋ค๊ณ ์๊ฐํ๋ค.
answer.name ์ ๊ฐ์ด 0, 1, 2์ผ๋๋ง๋ค ๊ทธ์ ๋ง๋ ๊ฐ์ฒด๊ฐ setState๋์ด์ผํ๋๋ฐ ์ข ๋ ๊ฐํธํ๊ณ ํจ์จ์ ์ด๊ฒ ๋ฐ๊ฟจ๋ค.
๋งตํํ ์ฝ๋
const getRadioValue = data => {
const [question, value] = data;
setRadioValue({ ...radioValue, [value]: question });
};
๊ฐ์ฅ ์ด๋ ค์ด ๋ถ๋ถ์ด์๋ค.
๋งตํ์ฉ ๊ฐ์ฒด๋ฅผ ๋ง๋๋ ๊ฒ์ ํ์ง๋ง component๋ฅผ return ํ๋ ํจ์๋ผ๋....
์ด๋ ค์ ๋ค. ์๋, ํจ์์์ component๋ฅผ return ํ ์๋ ์์์ง๋ง ๊ทธ ์ฌ์ฉ๋ฐฉ๋ฒ์ ๋ชฐ๋๋ค.
๊ทธ๋ผ, ๊ทธ ํจ์๋ฅผ ๋ฐ์์ ๋ฐ๋ก ์ ์ธํด์ฃผ๋???๋ผ๋ ์์ ๊ถ๊ธ์ฆ์ด์์๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ ํด๋ต์ ์ฐพ์๋ค.
์๋ ๋๋ currentQ๋ผ๋ count๋ฅผ ํด์ฃผ๋ state๊ฐ ์์๊ณ ์ง๋ฌธ์ด ๋์ด๊ฐ๋๋ง๋ค ๋ค์ ์ง๋ฌธ์ ๊ฐ์ ธ์ค๊ธฐ ์ํ count ์๋ค.
๋งตํํ๊ธฐ์
{currentQ === 0 && (
<Radio question={questionOne} getRadioValue={getRadioValue} />
)}
{currentQ === 1 && (
<Radio question={questionTwo} getRadioValue={getRadioValue} />
)}
{currentQ === 2 && (
<Radio question={questionThree} getRadioValue={getRadioValue}
/>
)}
{currentQ === 3 && (
<Select SelectData={SelectData} getSelectValue={getSelectValue}
/>
์ด๋ฐ์์ผ๋ก ๋ชจ๋ ์ปดํฌ๋ํธ๋ฅผ ์ซ์์ ๋ฐ๋ผ ๋ค๋ฅธ ์์ฑ๊ฐ์ ์ ๋ฌํด์คฌ๋ค. ๋๋ ์ด ๋ฐฉ๋ฒ์ด ๋๊ฒ ๋นํจ์จ์ ์ด๋ผ๋๊ฒ์ ์์ง๋ง ํ๋ ์ด์ ๋ ์ด๊ฒ ํ์คํ ๋ค๋ฅธ ์ปดํฌ๋ํธ๊ฐ ๋์ค๋ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์๊ฐํ๊ธฐ๋๋ฌธ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ด ๋ฐ๋ผ์ค๊ฑฐ๋ ๋จ์ง ์๊ณ ๋ค์ ์ง๋ฌธ์ผ๋ก ๋์ด๊ฐ ์ ์๋ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์๊ฐํ๋ค.
๋งตํํ ์ฝ๋
const renderByCurrentQuestion = currentQuestionIdx => {
const questionMapper = {
0: (
<Radio
radioValue={radioValue}
question={questionOne}
getRadioValue={getRadioValue}
/>
),
1: (
<Radio
radioValue={radioValue}
question={questionTwo}
getRadioValue={getRadioValue}
/>
),
2: (
<Radio
radioValue={radioValue}
question={questionThree}
getRadioValue={getRadioValue}
/>
),
3: <Select SelectData={SelectData} getSelectValue={getSelectValue} />,
};
return (
<S.SurveyLine>
<S.RadioBox>{questionMapper[currentQuestionIdx]}</S.RadioBox>
</S.SurveyLine>
);
};
๊ทธ๋์ ์์ ๊ฐ์ฒด๋ก ์ด ์ฝ๋๋ค์ ๋ค ์ ์ฅํด ๋๊ณ return ๊ฐ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ฑ์ด์ฃผ๋ฉฐ ๊ทธ ์์ ๊ฐ์ด ํจ์์ ์ธ์๋ก ๋ฐ๋ ๊ฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋๋ก ๊ตฌ์ฑํ๋ค.
๊ทธ๋ฆฌ๊ณ ์ด ์ปดํฌ๋ํธ๊ฐ ๋ค์ด๊ฐ์ผํ๋ ๊ณณ์ ํจ์๋ฅผ ์ ์ธํด์ค๋ค.
{renderByCurrentQuestion(currentQ)}
์ด๋ฐ์์ผ๋ก ์ฌ์ฉํด์ฃผ๋ฉด ํจ์์ ๋ด๊ฐ ์ค์ ํด๋์ currentQ ๋ผ๋ ์ซ์๊ฐ ๋ฐ๋๋๋ง๋ค ๋ค๋ฅธ ์ปดํฌ๋ํธ๊ฐ return ๋๊ฒ ๋๋ค.
์ด ๋ฐฉ๋ฒ์ ๋ด๊ฒ ํฌ๋ํฐ ์ถฉ๊ฒฉ?์ ์คฌ๋ค. ์ ์ ํ๋ค. ์ญ์ ์ฌ์ฉ๋ฐฉ๋ฒ์ ๋ฌด๊ถ๋ฌด์งํ๊ณ ๋๋ ๋๋ฌด ๋ถ์กฑํจ์ ๋ง์ด ๋๋๋ค.
๋ง์ด ๋ฐฐ์ด ํ๋ฃจ๋ค ! ๊ฐ์ฌํ๋ค !