클래스형 class Hello extends Reacr.Component { render() { return hello {this.props.name}; } } //rcc 단축키 React.Component 클래스를 상속 데이터는 this.state에 render() 함수에 HTML과 같은 JSX문법을 이용해서 데이터 UI로 표기 함수형 function Hello () { return hello, {props.name}; } //rsi 단축키
상속 부모요소의 프로퍼티를 상속받고싶다면 명시적으로 inherit 값 지정 - 자식까지 상속되는 프로퍼티 . . . - 상속되지않는 프로퍼티 width, height, margin, display, border 선택자 *: "*" 와일드 카드라 불림, 전체선택자를 사용하면 페이지에 해당하는 모든 요소에 영향 타입선택자: HTML요소 이름을 선택자로 사용 id선택자: id속성에 지정한 값을 이용해 스타일 지정, id앞에 '#'을 붙여 작성 페이지당 하나만 가지는 단일값으로 정확하게 일치하는 단일요소에만 지정하고 싶을때 사용 class선택자: 요소에 스타일을 지정하는 가장 일반적인 방법, class앞에 '.'을 붙여 작성 여러요소에 값은 class값을 지정해 동일한 스타일 지정할 수 있음 속성(attribu..
HTML구성요소 starttag endtag 요소의 시작과 끝을 의미하는 태그 으로 구성되면 endtag의 경우 Void 요소 , , , 처럼 endtag가 없는 태그들이 존재함 endtag를 작성하지않아도 일반요소처럼 작동 ! self colsing : 형태로 작성해도 된다 Element Content Element: starttag, endtag, content를 모두 합친 하나를 의미 content: starttag와 endtag사이의 내용을 의미 Attributes 속성 태그의 동작을 제어하도록 사용자가 지어하는 값을 의미 HTML 요소분류 inline 인라인요소 태그가 할당된 텍스트나 이미즈이 크기에 맞는 필요한 공간만을 차지 높이나 너비를 지정할 수 없으며 줄 내부 어디서든 시작함 인라인 요소..
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals();
자바스크립트 안에 내장되어있는 오브젝트 비동기적인 것을 수행 할 때 콜백 대신 유용하게 사용 state 상태 pending-> fulfilled or rejected producer producer 프로미스는 클래스 새로운 프로미스가 만들어질 때 전달한 excutor 바로 실행됨 const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('bomi'); },2000); }); resolve 기능을 정상적으로 수행해서 마지막으로 최종데이터를 전달 reject 기능을 수행하다 중간에 문제가 생기면 호출 consumer: then, catch, finally finally 성공과 실패를 떠나 무조건 호출 됨 promise.then..