props로 전달되는 텍스트 라인 줄바꿈 처리는 2가지 방법 !

개발을 하다 보면 props로 전달받은 텍스트의 줄 바꿈을 해야 하는 경우가 종종 있습니다. 

매번 까먹으니 정리해 놓으려고 합니다. 😑

먼저 텍스트를 입력받아 뿌려주는 초 간단 컴포넌트를 만들어 보겠습니다. 

const Item = ({ text }) => {
  return <p>{text}</p>;
};

export default function App() {
  return (
    <div className="App">
      <Item text={"안뇽하세요"} />
    </div>
  );
}

여기에서 text에 줄바꿈이 들어간 텍스트를 입력하려고 할 때 

아마 br태그를 사용하거나 '\n'를 사용하여 줄바꿈을 시도하실 수 있을 것 같습니다.

하지만 예상과는 달리 그대로 출력해 보면 문자로 출력돼 버리는 것을 알 수 있습니다. 

결과 화면

왜 이런 문제가 생기는 걸까요? 😮

이리저리 테스트 해본 결과 value의 값이 String과 섞이게 되면 String 타입으로 반환되는 것처럼 보입니다. 

마치 javascript에서 123(숫자) + 'hello'(문자열) = 123hello(문자열) 이 되어버리는 것처럼 말이에요. 결국에는 React도 javascript니까요! (개인적인 의견입니다)

 

참고로 prop에 태그만 보낼 경우에는 잘 동작됩니다. 

결과 화면

 

그럼 이런 문제를 해결하기 위해 어떤 방법들이 있는지 살펴보겠습니다.

 

1. replace로 문자 치환 하기

\n이나 <br/>과 같은 문자를 태그로 치환해 주는 방식입니다.

받는 자식 요소에서 props를 받아 return 할 때 처리해 줍니다. 

const Item = ({ text }) => {
  return <p>
    {text.split("\n").map((txt) => (
        <>
          {txt}
          <br />
        </>
      ))}
  </p>;
};

export default function App() {
  return (
    <div className="App">
      <Item text={"내 이름은 \n 고길동"} />
    </div>
  );
}

결과 화면

잘 적용되는 것을 확인할 수 있습니다. 

 

2. 배열 사용하기

아니면 값을 넘길 때 문자열을 타입별로 배열에 담아 보내줍니다. 

const Item = ({ text }) => {
  return text;
};

export default function App() {
  return (
    <div className="App">
      <Item text={["안녕", <br />, "친구들"]} />
    </div>
  );
}

결과 화면

역시 잘 동작합니다!

---

자주 사용되고 유연한 컴포넌트를 만들기 위해서는 첫 번째 방법이 좀 더 적합해 보입니다. 

간혹 특정 한 군데에만 국한되어 사용되는 경우 두 번째 방법은 직접 컴포넌트를 건드리지 않고 해결할 수 있어 한 번 쓰이는 경우에 사용하면 좋겠네요.