⭐ Gsap웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있습니다.https://greensock.com/reacthttps://www.npmjs.com/package/gsap gsapGSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, str..
⭐ React 기본 구조HTML : 컴포넌트 방식으로 로딩합니다.CSS : import 방식으로 로딩합니다.Script: 생명주기 함수로 스크립트 작업을 할 수 있습니다. 1. Form 형식 페이지기본 사용 Form 페이지, title, description, form 각각의 컴포넌트로 분리 및 사용App.jsimport React, { Component } from 'react';import './App.css';import './css/basic1.css';import Component1 from './js2/Component1_1';import Component2 from './js2/Component1_2';import Component3 from './js2/Component1_3'; class..
⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, ..
⭐ Create React App컴포넌트 매핑 이해하기1. 단계 1src/DataComponent.jsclass DataComponent extends React.Component { render() { let ulStyle = { marginTop : 15 } let liStyle = { lineHeight : 1.8 } return ( member1 member2 member3 ) }} 2. 단계 2src/App.js class App extends Com..
⭐ 기본 구조 이해하기 1. src/index.js 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( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals..
⭐ React EventJavaScript에서의 이벤트를 React에서도 사용 할 수 있습니다.1. 단계 1class CounterText extends React.Component { render() { let textStyle = { paddingBottom: 20, fontSize: 36, color: "#333" }; return ( {this.props.countProps} ) }}class App2 extends React.Component { constructor(props) { super(props); this.state= { count: 0 } } countPlus() { ..
⭐ Stateprops를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용 했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용합니다.1. state 사용하기class State extends React.Component { constructor(props) { super(props); this.state = { stateString : props.program, stateVersion: "18.2.0" }; } render() { return ( {this.state.stateString} {this.state.stateVersion} ) }}class App2 extends React.Compon..
⭐ Props컴포넌트 속성 전달하기Component1 -> Component2 -> Component3 내용 전달 1. 단계 1class Component3 extends React.Component { render() { return ( {this.props.color} {this.props.name} {this.props.size} ) }}class Component2 extends React.Component { render() { return ( ) }}class Component1 extends React.Component { render() { return ( ) }}ro..
