react에서 텍스트 삽입 및 줄바꿈 설정하는법 with 템플릿 리터럴

• 유저에게 텍스트를 보여주는 경우 줄바꿈을 해야하는 경우가 있다.
• 이 경우는 css에 white-space: pre-line을 주면 된다.
• 우선 react에서 텍스트를 넣는 방법은

<div>텍스트입니다!띄어쓸거야</div>
///
>>텍스트입니다!띄어쓸거야

• 모두가 알듯한 이런 방식으로 넣어주면 된다.
• 하지만 줄바꿈 기호는 다른 프로그래밍언어들과 비슷하게 \\n 이다.

<div>텍스트입니다!\\n띄어쓸거야</div>
///
>>텍스트입니다!\\n띄어쓸거야

• 하지만 당연하게도 \n을 바로 쓰면 줄바꿈이 먹히지 않는다.
• 따라서 이럴때 쓰는 것이 중괄호이다.

<div>{텍스트입니다!\\n띄어쓸거야}</div>
///
>>error

• 왜 error가 날까?

jsx문법에서의 중괄호

• 중괄호는 jsx코드 사이에 자바스크립트 문법을 이용하고 싶을 때 사용한다.
• 따라서 {}를 쓴다면 자바스크립트의 문법을 사용하게 되는건데
• 여기서 저 문장을 아무것도 묶지 않고 사용한다는 것은 마치 js 파일에서 변수를 지정하지 않고 아무 문자나 막쓰는 것을 의미한다.
  • 실제로 사용하면 not defined 에러가 뜬다.
• 따라서
  • {}를 써서 자바스크립트 문법을 사용할거라고 명시(\n 사용하기 위함)
  • {}를 썼기 때문에 문장을 문자열 형태로 형식지정
• 의 순서이다.

템플릿 리터럴

• 템플릿리터럴은 ${}를 사용해서 var, let, const로 정의한 값을 불러와 사용할 수 있다는 점이 있다.
• 따라서 지금까지 정리한 것들을 응용하면 동적으로 변하는 텍스트를 작성할 수 있다.
• 여기서 또 제기할 수 있는 문제 하나는 \n을 텍스트로 내보낼 수 있어야 할 수 있다.
• 예를 들어 코딩을 알려주는 사이트라면 \n을 기능이아니라 단순한 텍스트로 내보내고 싶을 수 있다.
• 즉, \n은 두가지의 기능이 있다.
  • 줄바꿈
  • \n 라는 글자 표시
• 이는 \을 하나 더 붙여 \\n 라는 글자 표시라는 것으로 해결한다.
• 또한 \n의 경우 그 부모 태그에 white-space: pre-line를 css 로 넣어줘야 작동한다.(밑에서 예시로 다시 보겠다.)

템플릿 리터럴의 추가기능

• 또한 템플릿리터럴은 ${}를 사용해서 var, let, const로 정의한 값을 불러와 사용할 수 있다는 점이 있다.
• 따라서 지금까지 정리한 것들을 응용하면 동적으로 변하는 텍스트를 작성할 수 있다.

예시

import { useState } from "react";
import styled from "styled-components";

const TextTest = () => {
  const [index, setIndex] = useState(0);
  const text = `안녕하세요 지금 인덱스는 ${index} 입니다.\\n 줄바꿈시작!`;
  const text2 = `안녕하세요 지금 인덱스는 ${index} 입니다.\\n 줄바꿈시작!`;

  const plus = () => {
    setIndex(index => index + 1);
  };

  return (
    <StDiv>
      <div>{"테스트 해보겠습니다.${index} \\n 줄바꿈시작!"}</div>
      <div>{"테스트 해보겠습니다.${index} \\\\n 줄바꿈시작!"}</div>
      <div>{`테스트 해보겠습니다.${index} \\n 줄바꿈시작!`}</div>
      <div>{`테스트 해보겠습니다.${index} \\\\n 줄바꿈시작!`}</div>
      <div>{text}</div>
      <div>{text2}</div>
      <div onClick={plus}>click</div>
    </StDiv>
  );
};
const StDiv = styled.div`
  white-space: pre-line;
`;

export default TextTest;

테스트 해보겠습니다.${index}
줄바꿈시작!
테스트 해보겠습니다.${index} \\n 줄바꿈시작!
테스트 해보겠습니다.0
줄바꿈시작!
테스트 해보겠습니다.0 \\n 줄바꿈시작!

안녕하세요 지금 인덱스는 0 입니다.
줄바꿈시작!
안녕하세요 지금 인덱스는 0 입니다.
줄바꿈시작!
click

결과

• 결과를 보면 알 수 있듯이 중괄호를 써야 줄바꿈이나 변수 같은 javascript기능을 쓸 수가 있고
• 그 안에서도 ``같은 템플릿 리터럴을 써야 변수를 사용할 수 있다.
• 이렇게 중괄호와 ``를 써야 동적인 텍스트를 쓸 수가 있으며
• click을 누르면 0 → 1로 숫자가 plus 된다.

출처

https://grahams.tistory.com/218

https://corini.tistory.com/entry/리액트React-학습자를-위한-기초지식-템플릿-리터럴-구조분해-할당

https://dev-csa.github.io/articles/2018-03/react_fund5