web sprit

React 에서 스타일을 적용 종류인라인 스타일일반 CSSCSS Modules ( 예 : Button.module.css )styled-components (CSS-in-JS)Tailwind CSSSCSS(Sass) React 에서 스타일을 적용 방법일반 CSS 파일 사용.css 파일을 만들고 컴포넌트에서 import📁 Button.css.button { background-color: black; color: white; padding: 12px 20px; border-radius: 6px;} 📁 Button.jsximport './Button.css';function Button() { return Click;} 장점가장 단순함.기존 HTML/CSS 개발 방식과 동일단점클래스 이름 충돌 ..

JSX 란?React에서 UI를 만들 때 사용하는 JavaScript + HTML 혼합 문법입다.겉으로 보기에는 HTML처럼 보이지만, 실제로는 JavaScript 코드이며 React가 이를 화면으로 변환해줍니다.JSX를 사용하는 이유 (장점)1. UI 구조가 명확하여 읽기 쉽습니다.HTML 태그를 그대로 사용하므로 직관적입니다.2. 에러를 초기에 잡을 수 있습니다.JSX는 문법이 엄격하여 실수를 빠르게 알려줍니다.3. 동적 UI를 쉽게 만들 수 있습니다.변수, 연산, 조건문 등을 {} 안에서 자유롭게 쓸 수 있습니다.4. 컴포넌트 기반 구조에 최적화되어 있습니다.UI를 작은 단위로 나누어 관리하기 좋습니다.JSX 문법 규칙1. 반드시 하나의 부모로 감싸서 반환해야 합니다.return ( Hel..

React 컴포넌트란?**UI의 작은 조각(블록)**이야. HTML의 같은 요소가 아니라, “화면에서 어떤 역할(버튼, 카드, 리스트, 모달 등)을 하는 코드 단위” 입니다.레고 블록처럼 조합해서 큰 UI를 만든다고 생각하면 쉽습니다. 각각의 컴포넌트는 **자기 책임(책임 단위: 한 가지 역할)**을 갖는 게 좋습니다.React에서는 보통 함수형 컴포넌트를 사용합니다. 그냥 함수인데, JSX(HTML처럼 보이는 문법)를 반환하면 그게 컴포넌트가 됩니다.// hello.jsfunction Hello() { return 안녕!;}export default Hello; 컴포넌트 주의할점이름은 대문자로 시작 → HTML 태그로 인식됨. → React 컴포넌트로 인식됨.하나의 컴포넌트는 하나의 JSX 요소만 ..