구글링으로는 답이 나오지 않았다.

1. 고민해보자

: 리액트를 다루다보면 개행이 생각보다 어렵다.
여러 방법을 써 보아도 다 무시된다.
리액트는 JSX이기 때문에 태그나 JS의 '\n' 사용이 가능할 것 같지만 사실 둘 다 불가능하다.
렌더시 <br>이 들어간 태그를 렌더해보면 <br>까지 텍스트로 처리가 될 것이며 \n 으로 개행이 되었지만 렌더되며 다시 붙게될 것이다.
이런 문제점을 해결할 수 있는 방법들을 고민해보았다.

---

2. 실험해보자.

(1) JSX도 JS의 확장이므로 \n 를 사용해보자.

: 안되는거 알지만 해보자.

class ASHlab extends Component {
  render() {
    return (
      <div>첫번째 줄 블라블라 \n 두번째 줄 블라블라</div>
      )
  }
}

• 그렇다 되지 않는다.
• 코드로 작용은 하여 텍스트로 표시되지는 않지만 줄바꿈이 되지 않는 것을 알 수 있다.
• 렌더되며 적용되지 않음을 알 수 있었다.

(2) 상태 객체로 처리해보자,

class ASHlab extends Component {
  render() {
    return (
      <div>첫번째 줄 블라블라 { \n } 두번째 줄 블라블라</div>
      )
  }
}

• 안된다.
• {'\n'} String 으로 변경 시키면...? 더 가능성이 없다.

(3). 템플릿 리터럴을 사용해보자.

class ASHlab extends Component {
  render() {
    return (
      <div>`첫번째 줄 블라블라
        두번째 줄 블라블라`</div>
      )
  }
}

• 역시나 안된다.
• ` 마저 텍스트로 취급될뿐이다.

(4) .replace(/\n/g, '
') 가 된다는 말이 있던데....

: 응.. 안된다.

---

3. 해결해보자.

1) <br>대신 넣어둔 \n 을 기준으로 split으로 잘라보자.

: 모든 요소들을 상태 객체로 처리하되 위에서의 실패와는 다르게 그 내부 요소를 자바스크립트 메서드로 구성하는 것이다. split과 map을 이용해보자.

{textElement.split('\n').map((line) => {
return <div>{line}</div>})}

• 잘린다... 조금 가능성이 보였다!! 테스트 중에 적어둔 (\n) 를 기준으로 split 했지만 나중에 더 나은 기준을 만들어 보면 좋을 것 같다.
• 자른 후 <div>에 자른 요소를 모두 넣었더니.... 모두 줄바꿈이 되었다.
• 하지만 내가 원하던 그림은 아니다. 나는 아래 사진처럼 반드시 <br>로 줄이 바뀐 텍스트 요소를 가지고 싶다.

2) 그럼 <div> 대신 <br> 을 넣으면 되지 않을까?

{textElement.split('\n').map((line) => {
return <>{line}</br><>})}

• 드디어 성공했다!!!
• fragment 로 묶고 <br>태그를 넣어주니 줄바꿈이 되었다.
• 진짜 인스타그램과 동일한 피드 바디를 얻게 되었다.

---

4. 업데이트

white-space: pre-wrap 을 쓰자....