onof

[React] 리액트 컴포넌트에 Props 적용 리액트 컴포넌트에 Props 적용해보기 title="WEB"이라는 속성을 사용할 수 있도록 약속된 jsx의 기호는 {this.props.title} 입니다.HTML에서 속성이라고 하는 것은 리액트에서 "props" 라고 합니다. import React, { Component } from 'react';import './App.css';class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ) }}class App extends Component { render() { return( .. 댓글 0 2025.05.27
[React]리액트 에서 인라인 스타일 적용하기 React를 사용하다 보면 CSS 클래스를 따로 작성하는 대신, 간단한 스타일을 인라인으로 적용해야 할 때가 종종 있습니다.그럴 때 사용하는 방식이 바로 인라인 스타일입니다. 하지만 React에서는 일반 HTML과는 조금 다르게 작성됩니다. 기본 HTML vs React에서의 인라인 스타일 작성/*기본 html*/Hello/*React*/Hello 차이점 속성 이름 카멜 표기법(font-size → fontSize) 전체 스타일이 중괄호 2개({{ ... }}) 로 감싸짐리액트 인라인 스타일 특징 style={ ... }: JSX에서는 style 속성에 자바스크립트 객체를 넘겨줘야 하므로 중괄호 한 쌍이 필요합니다.객체 자체도 또 { color: 'red', fontSize: '20px' }처럼 생겼기.. 댓글 0 2025.05.26
React에서 CSS 파일을 사용하는 두 가지 방법 _ about.css vs about.module.css 리액트 에서 컴포넌트마다 스타일을 입혀야 할 일이 많습니다.그때 사용하는 CSS 파일에 두 가지 방식이 있습니다. 일반 CSS (about.css)와 CSS 모듈 (about.module.css)입니다.두 방식의 차이와 언제 어떤 걸 써야 하는지 간단하게 정리해볼게요.1. 일반 CSS : about.css가장 기본적인 방식입니다..css 파일을 만들고 className="클래스명" 형태로 스타일을 적용합니다. About.jsximport './about.css';function About() { return About Me;} about.css.title { color: red;} 장점기존 CSS 방식에 익숙한 사람에게 편리함전역 스타일을 정의할 때 유용단점클래스명이 전역이기 때문에, 다른 컴포넌트.. 댓글 1 2025.05.26

티스토리툴바