[react] 저장된 데이터 불러올 때 줄바꿈을 어케할까(개행,줄바꿈,\n,split,textarea)

게시물의 

 

<textarea>에 다음과 같이 쳤는데

 

 

 

 

 

결과를 보면 줄바꿈이 안 되어 있다

 

 

디비 저장시 \n과 함께 저장이 되는데

React.js 에선 이 취약점을 원천차단하기위하여 그냥 무조건 텍스트형태로만 렌더링하게

설정되어 있다고한다.

=>

불러 올 때 react는 \n처리를 안해준다

 

 

 

출력할 <div>사이

난 this.props.data.content에 내용 데이터가 들어있다

\n 기준으로 자르고 line마다 <br/>태그를 사용해 준다

 <div className="mete_content">
          {this.props.data.content.split("\n").map((line) => { //this.props.data.content: 내용
            return (
              <span>
                {line}
                <br />
              </span>
            );
          })}

          {/* {this.props.data.content} */}
</div>

 

 

 

결과:

 

 

 

 

잘나온다 

 

 

 

 

 

참고:velopert.com/1896

[React.js] Tip: string 형태의 html을 렌더링하기, newline(\n) 을 BR 태그로 변환하기 | VELOPERT.LOG