728x90 300x250 SMALL Front-end334 템플릿 리터럴의 기본! 언태그드 템플릿 리터럴이란? 우리가 일반적으로 사용하는 템플릿 리터럴이다.백틱(`) 안에 변수를 삽입하거나 표현식을 사용해 문자열을 작성한다.추가적인 처리가 필요 없으며 그대로 문자열로 평가됩니다.const name = "Alice";const age = 30;const message = `My name is ${name}, and I am ${age} years old.`;console.log(message);// 출력: My name is Alice, and I am 30 years old. 2025. 2. 25. 템플릿 리터럴 ${} 로 문자열 쉽게 다루자 템플릿 리터럴(Templage Literal)은 ES6에서 도입된 문자열 처리 방법으로, 기존의 문자열 연결이나 문자열 정의 방식보다 더 직관적이 강력한 기능을 제공한다. 1. 기본 문법const message = `Hello, World!`;console.log(message); // Hello, World! 템플릿 리터럴은 백틱(backtick, `)으로 문자열을 감싸서 정의한다. 2. 주요 기능(1) 표현식 삽입템플릿 리터럴은 ${}구문을 사용해 문자열에 변수나 표현식의결과를 삽입할 수 있다.const name = "Alice";const age = 30;const greeting = `My name is ${name}, and I am ${age} years old.`;console.log(gre.. 2025. 2. 24. styled-components로 컴포넌트 스타일 확장하기 styled-components에서 스타일 확장하기는 기존 컴포넌트를 기반으로 새로운 스타일을 추가하거나 덮어쓰는 기능이다. 이를 통해 중복 코드를 줄이고 컴포넌트의 재사용성을 높일 수 있다.1. 기본 스타일 확장styled-components의 styled 함수로 기존 스타일을 확장할 수 있다.기존 컴포넌트를 재사용하면서 추가 스타일을 적용하거나, 기존 스타일을 덮어쓸 수 있다. 예제: 기본 확장import styled from 'styled-components';// 기본 버튼 컴포넌트const Button = styled.button` padding: 10px 20px; background-color: gray; color: white; border: none; border-radius: .. 2025. 2. 22. styled-components에서 props 활용법 완벽 정리! styled-components에서 props를 사용하는 것은 컴포넌트의 동적인 스타일을 적용하는 데 유용한 방법이다.이를 통해 CSS 값을 컴포넌트의 속성(props)에 따라 변경할 수 있다.기본 사용법styled-components는 React의 props를 활용하여 스타일링을 동적으로 조정할 수있도록 지원한다.CSS속성 값에 함수 형태로 접근해, props를 활용하여 조건부 스타일을 설정한다.import styled from 'styled-components';const Button = styled.button` background-color: ${(props) => (props.primary ? 'blue' : 'gray')}; color: ${(props) => (props.primary ?.. 2025. 2. 21. 이전 1 2 3 4 ··· 84 다음 728x90 반응형 LIST