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
반응형
'React' 카테고리의 다른 글
리액트서 링크랑 라우트 차이가 뭐임....? (0) | 2024.01.10 |
---|---|
useMemo vs useCallback (0) | 2023.12.28 |
useRef - scroll이벤트처리! (0) | 2023.12.27 |
useEffect 란? (1) | 2023.12.21 |
컴포넌트란? (0) | 2023.12.18 |
댓글