React

React

React STEP 4 - 컴포넌트 스타일 1

⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미 //HTML //JS(Babel) const root=ReactDOM.createRoot(document.getElementById("root")); root.render( Hello React )클래스를 생성하는 구문- extends 키워드를 사용해서 React.Component를 상속 받는다.- 제작된 클래스는 React.Component의 기능을 모두 사용할 수 있습니다. - render() 함수는 return() 함수로 처리된 HTML이나 JSX를 그리는 명령어입니다. - render() 함수는 React, ReactDOM에서 모두 사용할 수 있습니다. - ReactDOM에서 사용하는 render() 함수는 실제 HTML에 그려집니다. ..

React

React STEP 3 - 기본 메서드

⭐ React의 기본 사용 메서드 1. React.createElement()태그 구성 요소를 생성하는 메서드 React.createElement( type, [props], [ ... children] ); type : 태그 이름 문자열, React 컴포넌트[props] : React 컴포넌트에 넣어주는 데이터 객체[ ... children] : 자식으로 넣어주는 요소들사용 예시root.render( React.createElement( "h1", null, "Hello React!!" ));실제 렌더링 결과 Hello React

React

React STEP 2 - 프로젝트 구조 분석

⭐ 프로젝트 구조프로젝트의 진입점인 src/index.js 를 살펴보면, import 구문✅ React와 ReactDOM 가져오기✅ CSS 파일(index.css) 가져오기✅ 메인 컴포넌트인 App 가져오기✅ 웹 성능 측정을 위한 reportWebVitals 가져오기 const root = ReactDOM.createRoot(document.getElementById('root')); ✅ ReactDOM.createRoot()를 사용해 React 18+ 방식의 root 생성✅ document.getElementById('root')는 public/index.html에 있는 root.render(  React.StrictMode>    App />  React.StrictMode>)✅ document.g..

React

React STEP 1 - 환경 구성 및 실행

⭐ Reac JS 란사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구특징-> 빠른 업데이트와 렌더링-> Component로 이루어짐⭐ React 환경 구성1. Node.js 설치https://nodejs.org/ Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgNode.js 다운로드(LTS) 설치Node.js Setup 설치 진행 -> 따로 설정 할 것 없이 [Next]를 계속 누르고 [Install]cmd창 -> 설치 확인2. VS Code 설치https://code.visualst..

IT의 큰손
'React' 카테고리의 글 목록