⭐ 컴포넌트컴포넌트란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위컴포넌트를 파일 단위로 작성한 후, 필요한 위치에서 로드해서 사용할 수도 있습니다.1. 컴포넌트 조합하기단계 1class Component2 extends React.Component { render() { return ( This is imported Component. ); }}class Component1 extends React.Component { render() { return ( React Example ); }}root.render ( )단계2class Component2 extends React...
⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미합니다.1. 컴포넌트는 개별적인 속성을 정의할 수 있다.ReactDOM에서 호출된 컴포넌트에서 전달한 속성은 {this.props.propsValue} 방식으로 전달 받습니다. props는 속성인 Properties의 약어입니다.this는 HelloReact 컴포넌트를 의미합니다. 이를 바인딩(binding)이라 합니다.전달받은 속성은 중괄호를 사용해서 렌더링하며, 이런 방식을 JSX의 표현식이라 합니다.class StudyReact extends React.Component { render() { return ( Study React {this.props.type} ) }}root.rende..
⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미 //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의 기본 사용 메서드 1. React.createElement()태그 구성 요소를 생성하는 메서드 React.createElement( type, [props], [ ... children] ); type : 태그 이름 문자열, React 컴포넌트[props] : React 컴포넌트에 넣어주는 데이터 객체[ ... children] : 자식으로 넣어주는 요소들사용 예시root.render( React.createElement( "h1", null, "Hello React!!" ));실제 렌더링 결과 Hello React
⭐ 프로젝트 구조프로젝트의 진입점인 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..
⭐ 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..
★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름 한 파일에 컴포넌트 구성을 위해 템플릿, 스크립트, 스타일 정보를 모두 포함하기 때문에 컴포넌트 단위로 분리 가능 Vue 애플리케이션을 개발하기 위해서는 Webpack, Rollup 과 같은 모듈 번들러 도구와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다. 1. 프로젝트 설정 도구 1.1 Vue CLI 도구 Webpack 기반의 Vue 공식 프로젝트 설정 도구였다. 하지만, 이 방법은 프로젝트를 생성하고 구동하기까지 다소 긴 시간이 소요가 된다. 또한, 번들링 과정을 거쳐야하기 때문에 작성한 코드를 테스트하기에 조금 긴 시간을 기다려야 한..
★ TodoList 할일을 적고 해당 사항들을 수행해 나가는 List Step1 ~ Step4에 대한 내용을 가지고 해당 기능을 개발 1. 기본 UI 개발 큰 틀 잡기 :: Todolist App 본문 내용 삽입 추가 할일 1 (완료) 삭제 할일2 삭제 할일3 삭제 2. 데이터와 메서드 정의 [ 데이터 ] todo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 data 입니다. todolist 추가한 todo 들의 목록, todo 한 건은 다음과 같습니다. id todo 한 건의 고유 키, 이 예제에서는 timestamp를 이용합니다. todo todo 내용 completed 완료 여부(true, false) [ 메서드 ] addTodo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 dat..
