Jade_o.o

App.js import './App.css'; import UseJSX from './UseJSX'; function App() { return ( JSX 문법을 배워봐요! ); } export default App; UseJSX.js ver.1 import ClassComp from "./ClassComp"; export default function UseJSX() { // 1. 인라인 스타일 적용 const divStyle = { width: "100px", height: "100px", backgroundColor: "gray", textAlign: "center", color: "white", marginTop: ".5rem", display: "inline-block", border: "1p..

JSX JavaScript + XML • 자바스크립트 확장 문법으로 XML 과 유사 • 바벨을 이용해 일반 자바스크립트 코드로 변환 JSX 1. 전체는 하나의 태그로 감싸야함 html 태그는 항상 return 이후에, 반드시 하나의 부모 요소가 전체 요소를 감싸는 형태로! + 딱 하나의 태그만 return할 때는 ()가 필요 없지만 여러 개의 태그가 있다면 return (~) 괄호 내 부에 작성해야 해요! function App() { const str = 'hello'; return ( {str} world ); } export default App; JSX 2. html with JS html를 작성하다가 중간에 js 문법을 사용하고 싶을 때는 {중괄호}로 감싸 야 합니다. JSX 3. 인라인 sty..

Component • React의 꽃이라 불리는 React의 핵심 • React 에서 화면을 구성하는 하나의 부분 • 내부의 데이터만 변경해서 전체적인 틀(UI)을 재사용 가능 • UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 분리 가능 Component 트리 구조 React 컴포넌트 종류 (1) 클래스형 컴포넌트 (Class Component) • render 함수를 반드시 사용해야 함 • lifecycle 기능 • 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용 (2) 클래스형 컴포넌트 (Class Component) • render 함수를 반드시 사용해야 함 • lifecycle 기능 • 컴포넌트를 만들 때 기존 Components 클래스에..

방법1. CDN 사용 방법2. npx create-react-app 사용 • 리액트 앱(프로젝트) 이름 규칙 • 대문자 사용 불가능 • 단어 여러 개 사용시 하이픈(-) 기호로 구분 • npx • npm의 자식 명령어로 npm보다 가볍게 패키지를 구성 • npm 버전이 5.2 이상일 때, node 버전이 14 이상일 때 사용 가능 npm install create-react-app -g // create-react-app 모듈 사용할 수 있도록 global로 설치 npx create-react-app test-app // test-app => React App Name React 프로젝트 실행하기 npm start create-react-app으로 생성한 프로젝트의 구조 /node_modules : np..