⭐ 기본 구조 이해하기 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() { ..
⭐ JSX에서의 배열 1. 단계 1class Round extends React.Component { render() { let roundStyle = { display: "inline-block", margin:10, width: 100, height: 100, backgroundColor: this.props.backgroundColor, borderRadius: 50 } return( ) }; }root.render ( ) 2. 단계 2class Round2 extends React.Component { render() { let roundStyle = { display: "inline-bl..
⭐ Statestate를 활용한, 1초에 하나씩 수가 증가되는 프로그램1. 단계 1구조 생성class AutoCounter extends React.Component { render() { let titleStyle = { margin: 0, padding: 0, fontWeight: "bold", color: "#333" }; return ( ReactExample ) }}class AuthoCounterBox extends React.Component { render() { let boxStyle = { display: "inline-block", padding: 20, backgroundColo..
⭐ 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..
⭐ Props- props를 사용한 컬러 팔레트 만들기 1. 단계 1컴포넌트를 화면에 배치class ColorPalette extends React.Component { render() { let paletteStyle= { display: "inline-block", marginRight: 10, width: 100, height: 100, backGroundColor: '#fff', boxShadow: "1px 1px 2px rgba(0,0,0,2)" }; return ( ) }}root.render( ) 2. 단계 2ColorPalette 컴포넌트에 ColorChip 컴포넌트 추가class ColorChip ..
⭐ Props 1. props를 객체형으로 사용하기class Props extends React.Component { render() { let {propsValue} = this.props; return ( {JSON.stringify(propsValue)} {propsValue.program} {propsValue.version} ) }}class App2 extends React.Component { render() { let h1Style = { fontWeight: "normal" } return ( React Example ); }}r..
