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
반응형