리액트6 [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( .. 2025. 5. 27. [React]리액트 에서 인라인 스타일 적용하기 React를 사용하다 보면 CSS 클래스를 따로 작성하는 대신, 간단한 스타일을 인라인으로 적용해야 할 때가 종종 있습니다.그럴 때 사용하는 방식이 바로 인라인 스타일입니다. 하지만 React에서는 일반 HTML과는 조금 다르게 작성됩니다. 기본 HTML vs React에서의 인라인 스타일 작성/*기본 html*/Hello/*React*/Hello 차이점 속성 이름 카멜 표기법(font-size → fontSize) 전체 스타일이 중괄호 2개({{ ... }}) 로 감싸짐리액트 인라인 스타일 특징 style={ ... }: JSX에서는 style 속성에 자바스크립트 객체를 넘겨줘야 하므로 중괄호 한 쌍이 필요합니다.객체 자체도 또 { color: 'red', fontSize: '20px' }처럼 생겼기.. 2025. 5. 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 방식에 익숙한 사람에게 편리함전역 스타일을 정의할 때 유용단점클래스명이 전역이기 때문에, 다른 컴포넌트.. 2025. 5. 26. [React] 리액트에서 스타일을 적용하는 두 가지 방법 리액트에서 스타일을 적용하는 방법은 크게 두 가지가 있습니다. JSX 내부에서 style 객체 사용하기 외부 CSS 파일을 만들어서 불러오기 //JSX 스타일 객체방식 //외부 CSS 파일과 className 1. JSX 내부에서 style 객체 사용하기style={{ ... }} 또는 style={styles.이름} → JSX 안에서 직접 스타일을 작성 변환한 스타일 객체const styles = { aboutSection: { padding: '2rem', backgroundColor: '#fefefe', border: '1px solid #ddd', borderRadius: '8px', marginTop: '2rem', }, heading: { color: .. 2025. 5. 23. [React] 기초, 셋팅 초기 파일명과 파일 역할 파일별 역할 설명 파일이름역할App.jsx리액트 앱의 메인 컴포넌트. 보통 이 파일에서 전체 레이아웃을 구성하며, 다른 컴포넌트들을 불러와 사용합니다.App.cssApp.jsx에서 사용하는 스타일이 들어가는 파일입니다. App 컴포넌트 전용 CSS로 생각하면 됩니다.index.css프로젝트의 전역 스타일을 정의합니다. 예: body, html, 기본 글꼴, margin/padding 초기화 등 전체에 적용되는 CSSmain.jsx리액트 앱의 진입점(Entry point) 입니다. App.jsx를 root DOM에 렌더링하는 역할을 하며, 가장 처음 실행되는 파일입니다.html 마크업과 비교 index.css에는 reset.css, 기본 글꼴, 공통 요소 마진 제거 등을 하면 좋아요.App.css는 컴포넌.. 2025. 5. 22. 리액트 네이티브, <br> 태그 줄바꿈 하기 리액트 네이티브에서는 HTML의 태그를 직접 사용할 수 없습니다.대신 다음과 같은 방법들로 줄바꿈을 구현할 수 있습니다: 개행 문자 사용 {`2024.06.21 13:00 \n ~ 2024.06.21 14:00`} 여러 Text 컴포넌트 사용 2024.06.21 13:00 {"\n"}~ 2024.06.21 14:00 줄바꿈이 필요한 부분을 분리 2024.06.21 13:00 {"\n"} ~ 2024.06.21 14:00 이 중 첫 번째나 두 번째 방법이 가장 간단하고 일반적으로 사용됩니다.\n은 줄바꿈 문자로, 텍스트를 새 줄로 나눕니다. 2025. 2. 4. 이전 1 다음 728x90 반응형
