728x90 300x250 SMALL 프론트엔드13 템플릿 리터럴 심화! 태그드 vs 언태그드 차이점 태그드 탬플릿 이란?태그 함수를 사용하여 템플릿 리터럴을 커스터마이즈할 수 있다.백틱 앞에 함수 이름(태그 함수)을 붙여서 템플릿 리터럴을 처리한다.태그함수는 템플릿 리터럴을 입력받아 직접 조작하거나 결과를 반환한다.문법tagFunction`문자열 템플릿`; 예제function myTag(strings, ...values) { console.log(strings); // 문자열 배열 console.log(values); // 삽입된 값들 return "Processed Template";}const name = "Alice";const age = 30;const result = myTag`My name is ${name}, and I am ${age} years old.`;console.log(r.. 2025. 2. 26. 템플릿 리터럴의 기본! 언태그드 템플릿 리터럴이란? 우리가 일반적으로 사용하는 템플릿 리터럴이다.백틱(`) 안에 변수를 삽입하거나 표현식을 사용해 문자열을 작성한다.추가적인 처리가 필요 없으며 그대로 문자열로 평가됩니다.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. 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 다음 728x90 반응형 LIST