데이터로 받아온 문자열에 줄바꿈을 적용해 원하는 형태로 만들어보자.
API를 통해 받아오는 데이터를 수정하는 상황.
<h2>{question}</h2>- 원하는 구조
야외에서 같이 뛰어노는 반려견,
쇼파에 누워 끌어안는 반려견
중 어느 스타일을 선호하나요?- 실제 렌더링된 구조
야외에서 같이 뛰어노는 반려견, 쇼파에 누워 끌어안는 반려견 중 어느 스타일을 선호하나요? 시도
- 정규식을 활용한 replace 메소드
백엔드에게 띄어쓰기 할 부분마다 < br >를 넣어달라고 부탁하고, repalce메소드로 < br >을 띄어쓰기로 바꾸려는 시도를 했다.
<h2>
{question.replace(/(<br>) /g, '\n')}
</h2>렌더링이 되지 않는다...
next...
해결방법
step1. 데이터 형태 파악하기
"안녕하세요<br>반갑습니다."받아온 데이터를 보면 모두 문자열로 처리되어 들어오는 것을 확인할 수 있었다.
내가 만들어야 될 형태는
"안녕하세요"<br>반갑습니다."이다.
step2. < br >기준으로 split 해주기
const str = "안녕하세요<br>반갑습니다."
// result는 이번 step에서 배열 값을 보여주기 위한 요소로 필요하진 않다.
const result = str.split('<br>');
result // ['안녕하세요', '반갑습니다.']step3. React jsx에 적용하기
<h2>
{str.split('<br>').map((line) => {
return (
<>
{line}
<br />
</>
);
})}
</h2>map으로 요소 하나 하나를 돌면서 사이에 < br >로 띄어쓰기를 만들어주었다.
Lv.1🌷