React
useRef - split로 데이터 띄어쓰기
YoHaYo
2023. 12. 27. 18:59
728x90
반응형
import React from 'react'
import { useRef } from 'react'
function Preinterview() {
const faq = useRef(null);
const interviewArr = [
{
question : "비전공자로 프론트강의가 가장 어려웠던 점은?",
answer : "어려웠다기보단/즐겁게 했습니다 ㅎㅎ"
},
{
question : "집가고 싶은날은 ?",
answer : "음.../바로 지금? ㅎㅎ"
},
{
question : "좋아하는 음식은?",
answer : "카레?/초밥? ㅎㅎ"
}]
console.log(interviewArr)
// const chars = interviewArr[0].answer.split('');
// console.log(chars[0]);
// split : 문자를 정렬데이터로 변환하는 아주 중요한 메서드
// 문자.split('구문기호') -> array타입으로 전환
return (
<section ref={faq}>
<h2>면접전에 봐주세요.</h2>
<ul>
{interviewArr.map((el,idx) => {
return(
<li key={idx}>
<h3>{idx + 1}. {el.question}</h3>
<div>
{/* ★ el.answer.split('/') : '/'을 기점으로 배열로 분리함 !
다음과 같이 바뀐다는 뜻이야. answer: ["어려웠다기보단", "즐겁게 했습니다 ㅎㅎ"]
*/}
{el.answer.split('/').map((v,i) => {
console.log(typeof el, el)
console.log(typeof el.answer, el.answer)
console.log(typeof v, v)
return(
// React.Fragment : 빈태그인데 React에서 쓸 수 있게만듬. 얘는 key 넣을 수 있음. 빈태그는 안됨.
<React.Fragment key={i}>
{v}
<br/>
</React.Fragment>
)
})}</div>
</li>
)
})}
</ul>
</section>
)
}
export default Preinterview
반응형