개요
문자열로 작업할 때 특정 값을 해당 문자열에 동적으로 추가하여 여전히 문자열을 반환해야 하는 상황이 발생할 수 있습니다. 이 작업을 문자열 보간이라고 합니다.
이 동적 값은 변수, 상태 또는 문자열에 포함될 실제 값을 포함하는 기타 모든 것이 될 수 있습니다.
이 가이드에서는 문자열 보간이 필요할 수 있는 다양한 인스턴스와 이를 달성할 수 있는 방법을 고려하여 React에서 문자열 보간을 구현하는 방법을 살펴보겠습니다.
ES5 및 ES6의 문자열 보간
문자열 보간은 연결 및 템플릿 리터럴의 두 가지 방법으로 수행할 수 있습니다. 일부에서는 연결이 문자열 보간이 아니라고 주장하지만 문자열 보간은 연결이 명확하게 수행하는 자리 표시자 대체를 수행하여 문자열을 생성하는 기능을 나타냅니다.
ES6에 템플릿 리터럴이 도입되기 전에는 항상 연결을 사용했는데, 이는 많은 변수를 대체해야 하는 여러 줄 문자열을 처리할 때 매우 어렵습니다. 템플릿 리터럴이 ES6에 도입되었을 때 특히 표현식을 포함하려는 더 길거나 여러 줄의 문자열에 대해 훨씬 더 쉽게 구현할 수 있음이 입증되었습니다.
이 가이드에서는 두 가지 방법을 모두 살펴본 다음 권장되는 접근 방식인 템플릿 리터럴을 사용하여 몇 가지 예를 수행합니다.
연결이 있는 React의 문자열 보간
연결의 표준 방법은 다음을 사용하는 것입니다. +
특정 변수 또는 상태에 대한 연산자:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
위의 코드에서 상태는 fontSize
의 값을 갖는 large
. 클래스를 동적으로 가져오기를 원합니다. 예를 들어 text-small
, text-large
, text-medium
, 등. 상태에 따라 다른 className
따라서 제목에 적용됩니다!
연결을 사용하여 먼저 실제 문자열을 배치한 다음+
연산자를 사용하여 변수를 실제 문자열로 보간하여 보간된 값을 반환할 수 있습니다.
위의 방법은 우리가 두 개 이상의 변수일 때, 특히 문자열이 끝이 아닌 다른 문자열 내에 추가되는 경우 복잡해집니다.
템플릿 리터럴로 반응하는 문자열 보간
이것은 문자열 보간을 처리하는 가장 좋은 방법입니다. ES6에 추가되었으며 이후 문자열 보간에 가장 일반적으로 사용되는 방법이 되었습니다. 문자열 템플릿 리터럴을 사용하여 앞의 예를 반복해 보겠습니다.
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
위의 코드에서 볼 수 있듯이 더 이상 템플릿 리터럴에서 더하기 연산자를 사용하지 않고 대신 전체 문자열에 백틱을 사용한 다음 달러 기호와 중괄호를 사용하여 변수와 동적 값을 삽입합니다.
진술이 평가되고 const fontSize
문자열에 삽입됩니다.
더 많은 React 문자열 보간 예제를 살펴보겠습니다!
React에서 스타일 값을 전달하기 위해 문자열 보간을 사용하는 방법
React에서 내부적으로 텍스트의 스타일을 지정하는 데 사용하려는 변수에 스타일 데이터가 저장되어 있는 상황에서 템플릿 리터럴을 사용할 수 있습니다.
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
앞서 말했듯이 달러 기호와 중괄호는 자리 표시자를 유지하는 데 사용되며 적절한 방식으로 스타일을 반환합니다.
숫자를 곱하기를 원한다고 가정하면 중괄호 내에서 평가를 수행할 수도 있습니다.
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
React에서 표현식으로 문자열 보간을 사용하는 방법
지금까지 평가를 수행할 수 있음을 확인했습니다. 중괄호 안에 표현식을 추가하여 표현식을 기반으로 올바른 값을 얻고 사용할 수 있다는 점도 중요합니다.
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
템플릿 리터럴로 여러 줄 문자열을 보간하는 방법
앞서 말했듯이 템플릿 리터럴을 사용하면 여러 줄의 문자열에 자리 표시자를 쉽게 추가할 수 있습니다.
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
위의 코드에서 연결을 사용하는 것과 비교하여 템플릿 리터럴을 사용하는 것이 얼마나 쉬운지 알 수 있습니다.
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
템플릿 리터럴로 논리 연산자를 사용하는 방법
지금까지 삼항 연산자를 사용하여 표현식을 전달하는 방법을 살펴보았지만 논리 연산자도 템플릿 리터럴과 함께 작동할 수 있다는 점도 가장 좋습니다.
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
결론
이 기사에서 두 가지 표준 방법을 사용하여 문자열 보간을 구현하는 방법과 템플릿 리터럴이 얼마나 강력한지 배웠습니다. 템플릿 리터럴이 도입된 이후로 대부분의 사람들은 사용이 간편하고 코드 가독성이 크게 향상되어 템플릿 리터럴을 선호합니다.