728x90 300x250 SMALL 웹개발11 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. styled-component란? 스타일 컴포넌트 개념부터 실전까지 styled-components란?리액트에서 사용하는 CSS-in-JS 라이브러리다.간단히 말하면, CSS와 자바스크립트를 섞어서 스타일을 작성할 수 있게 해주는 도구이다.사용 이유컴포넌트 기반 : 각 컴포넌트에 스타일을 붙여서 관리하기 편하다.CSS 중복 방지 : 클래스 이름 충돌 문제를 자동으로 해결한다.동적 스타일링 : 컴포넌트의 props를 활용해 조건에 따라 스타일을 동적으로 변경할 수 있다.styled-components 사용 예제1. 기본 사용법import styled from 'styled-components';// 버튼 스타일 정의const Button = styled.button` background-color: blue; color: white; padding: 10px 20px.. 2025. 2. 20. React에서 useState를 활용한 간단한 회원가입 폼 만들기 이번에는 useState를 활용하여 이름과 성별을 입력받고, 제출 버튼을 누르면 입력된 값을 출력하는 간단한 회원가입 폼을 만들어보자 1. React에서 useState란?useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 도와주는 React의 훅이다. 이 훅을 사용하면 입력값을 저장하고 변경할 수 있다. 2. 회원가입 폼 만들기아래는 이름과 성별을 입력받는 폼을 구현한 코드이다.import React, { useState } from "react";const RegisterForm = () => { const [userName, setUserName] = useState(""); const [userGender, setUserGender] = useState("남성"); c.. 2025. 2. 3. React에서 value 설정하고도 입력이 가능하게 만드는 방법 1. value 속성의 역할React에서 이나 에 value 속성을 설정하면 해당 입력 필드는 제어 컴포넌트가 된다.즉, value가 React 상태에 의해 고정되므로, 사용자가 직접 입력해도 그 값이 없데이트되지 않는다.입력 값을 바꾸려면 React 상태를 업데이트해야만 변경된다.function App() { return } 이 경우 입력 필드의 값은 "고정 값"으로 고정된다.사용자가 입력을 시도해도 값이 절대로 바뀌지 않는다.2. 자유롭게 입력 가능하게 만들려면?만약 입력값을 사용자에게 자유롭게 입력하도록 허용하면서도 value를 유지하고 싶다면 다음 방법이 있다. undefined 또는 null을 value로 설정function App() { return ;} 동작 원리value가 undefined.. 2025. 1. 30. 이전 1 2 3 다음 728x90 반응형 LIST