React.js | Text 데이터 줄바꿈 안먹힐 때

React에서는 줄바꿈을 허용하지 않는다. 때문에 매핑하고 <br /> 태그를 임의로 주어서 줄바꿈을 표기해주자.

 

<Wrap ai={`start`} margin={`25px 0 0 0`}>
                {state.post_content.split("\n").map((line: any) => { //this.props.data.content: 내용
                  return (
                    <span>
                      {line}
                      <br />
                    </span>
                  );
                })}
              </Wrap>