728x90 300x250 SMALL react18 react-router-dom개념 완벽이해 react-router-dom은 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위해 사용되는 라이브러리이다. 이 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA)에서 페이지 이동을 쉽게 관리할 수 있다.한마디로 페이지 전환을 위한 필수적인 패키지이다. 주요 개념1. 라우팅(Routing)사용자가 입력한 URL에 따라 적절한 React 컴포넌트를 렌더링 하는 작업을 말한다.예를 들어, /home URL로 이동하면 Home컴포넌트가 렌더링 되고, /about URL로 이동하면 About 컴포넌트가 렌더링 된다. 2. SPA에서의 라우팅React 애플리케이션은 SPA구조를 가지기 때문에 페이지 이동시 전체 페이지를 새로고침하지 않는다.대신 URL만 변경하고 필요한 컴포넌트를 동적으로 렌더링 .. 2025. 3. 2. 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. 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. 이전 1 2 3 4 5 다음 728x90 반응형 LIST