React를 사용하여 문단 내 JSX 문자열에 새로운 라인 추가하기

파라그래프 안에서 JSX 문자열에 새 줄 추가하기 – React

React를 사용할 때 자주 발생하는 요구 사항 중 하나는 파라그래프 안에서 JSX 문자열에 새 줄을 추가해야 하는 경우입니다. 이는 가독성을 높이거나 형식을 맞추기 위해 줄 바꿈이 필요한 텍스트 콘텐츠를 처리할 때 유용할 수 있습니다.

방법 1: CSS 사용하기

이를 달성하는 한 가지 방법은 파라그래프 요소에 CSS 스타일을 설정하는 것입니다. CSS 스타일에 white-space: pre-wrap; 또는 white-space: pre-line; 중 하나를 추가함으로써 텍스트 콘텐츠가 어떻게 표시되는지 제어할 수 있습니다.

// 파라그래프에 대한 CSS 스타일
<p style={{ whiteSpace: 'pre-wrap' }}>여기에 텍스트 내용 입력</p>

방법 2: JSX 요소를 포함한 배열 사용하기

다른 접근 방법은 문자열로 이루어진 배열을 만들고 각 줄 사이에 <br /> 태그로 구분하는 것입니다. React v16부터는 배열도 요소에 대한 유효한 반환 값으로 간주됩니다. 다음은 예시입니다:

class App extends React.Component {
  render() {
    const arr = ['Line 1. ', <br />, 'Line 2.'];
    return (
      <p> {arr} </p>
    );
  }
}

방법 3: JSX로 문자열 조작하기

API에서 문자열 콘텐츠를 받는 경우, 실제 JSX 요소로 대체하기 위해 <br /> 부분 문자열의 모든 인스턴스를 찾아내어 JSX 요소의 배열을 만들 수 있습니다. 다음은 이를 달성하기 위한 예시입니다:

class App extends React.Component {
  render() {
    const str = 'Line 1. <br /> Line 2.';
    const arr = str.split(/<br \/>/);
    const resultArr = [];
    arr.forEach((item, i) => {
      if (i % 2 === 0) resultArr.push(<br />);
      resultArr.push(item);
    });
    return (
      <p> {resultArr} </p>
    );
  }
}

방법 4: 템플릿 리터럴과 CSS 사용하기

템플릿 리터럴과 CSS 규칙 white-space: pre;를 함께 사용하여 줄 바꿈을 보존할 수 있습니다. 다음은 예시입니다:

class App extends React.Component {
  render() {
    const str = `Line 1.
Line 2.`;
    return (
      <p style={{whiteSpace: 'pre'}}> {str} </p>
    );
  }
}

결론

React에서 파라그래프 안의 JSX 문자열에 새 줄을 추가하는 것은 다양한 접근 방식을 통해 달성할 수 있습니다. CSS 스타일링을 통한 방법, JSX 요소를 사용하는 배열, JSX로 문자열 조작, 또는 템플릿 리터럴을 활용하는 등의 방법을 사용하여 특정 사용 사례에 가장 적합한 방법을 선택할 수 있습니다.

이러한 기술을 구현함으로써 React 애플리케이션에서 텍스트 콘텐츠의 가독성과 형식을 개선하여 더 나은 사용자 경험을 제공할 수 있습니다. 콘텐츠의 소스를 고려하여 요구 사항에 가장 적합한 접근 방식을 선택해야 합니다.

참고 자료 : 

reactjs