22-07-13(수) 115일차 [React, Team Project] React onClick, onChange, OnKey, redux, 리눅스란

국비지원교육 (22.01-22.07)/강의노트

22-07-13(수) 115일차 [React, Team Project] React onClick, onChange, OnKey, redux, 리눅스란

옌炎 2022. 7. 14. 01:57

728x90

수업내용

1교시 (09:30-10:20)

066/App.js

import React from 'react';
import ReactonClick from './R066_ReactonClick'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactonClick/>
    </div>
  );
}

export default App;

R066_ReactonClick.js

import React, { Component } from 'react';
import './App.css';

// 카멜 케이스
// 합성어를 낙타봉 처럼 쓰는 것
// 합성의 첫 번째 글자를 대문자로 쓰는 것 
// ComponentButton : Upper Camel Case
// stateButton : Lower Camel Case

class R066_ReactonClick extends Component {
	buttonClick = (param) => {
		if(typeof param != 'string') param = "Click a"
		console.log('param : ' + param);
	}

	render() {
		return (
		  <>
		    <button onClick={e => this.buttonClick("Click button")}>Click button</button>
		    <div onClick={e => this.buttonClick("Click div")}>Click div</div>
		    <a href="javascript:" onClick={this.buttonClick}>Click a</a>
		  </>
		)
	}
}

export default R066_ReactonClick;

067/App.js

import React from 'react';
import R067_onChange from './R067_onChange'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <R067_onChange/>
    </div>
  );
}

export default App;

R067_onChange.js

import React, { Component } from 'react';
import './App.css';

class R067_onChange extends Component {
	change = (e) => {
	  var val = e.target.value;
	  console.log('param : ' + val);
	}

	render() {
	  return (
	    <>
	      <input type="text" onChange={this.change}/>
	      <select onChange={this.change}>
	        <option value="react">react</option>
	        <option value="200">200</option>
	      </select>
	    </>
	  )
	}
}

export default R067_onChange;

리눅스
--------------
리눅스는 GNU OS 이다.
리눅스의 라이센스라던지 기타 제반 사항들은 모두 GNU를 따르게 되어 있습니다.

배포판 : 레드헷 7.0, 8.0, SUSE 9.0
커널 : 커널 2.6.6, 커널 2.530
: 커널 버전 두번째 숫자가 짝수 면 안정화 버전, 홀수 면 개발버전

수세(OpenSUSE) : 서버용 : 독일에서 출시 : 유럽에서 많이 사용 : 안정적인 리눅스 : 국내에는 자료가 별로 없음

데비안(Debian) : 서버용 : 배포되는 리눅스 들 중 안정성이 매우 높고, 다양한 패키지 활용, 서버용
: ORG 비영리 단체에서 만들며, 완벽한 GNU를 추구
우분투(Ubnutu) : 개인용 : 데비안 계열
: APT(Advanced Package Tool)

레드햇(Red Hat) : 서버용 : 현재 레드햇은 상용으로 판매되는 레드햇 엔터프라이즈 리눅스(RHEL)
: RPM(Redhat Package Management)으로 인기
페도라(Fedora) : RHEL에 포함될 기능을 미리 시험하는 용도로 사용 : 레드햇 계열
센트OS(centOS) : 개인용 : 레드햇 계열

한컴리눅스 : 데스크탑 운영체제를 추구한다.
리눅스용 한글프로그램을 만들어서,
리눅스를 사무용, 개인용으로 일반 사용자들이 쉽게 사용할 수 있도록 만들고 있다.
와우 : 서버급 운영체제, 한글화나 유저들이 좀더 쉽게 사용할수 있도록 프로그램을 만든다.

초보자 : 우분투
해킹용 : 칼리 리눅스(Kali linux)
서버용 : RHEL(유료), centOS(무료)
전문가용 : 페도라

2교시 (10:30-11:20)

071/App.js

import React from 'react';
import ReactOnKey from './R071_OnKey'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <ReactOnKey/>
    </div>
  );
}

export default App;

R071_OnKey.js

import React, { Component } from 'react';
import './App.css';

class R071_OnKey extends Component {
	OnKey(event, e) {
		var val = e.target.value;
		console.log('event : '+event, ", value : " + val);
	}

	render() {
		return (
		  <>
		    onKeyDown : <input type="text" onKeyDown={e => this.OnKey("onKeyDown", e)}/><br/>
		    onKeyPress : <input type="text" onKeyPress={e => this.OnKey("onKeyPress", e)}/><br/>
		    onKeyUp : <input type="text" onKeyUp={e => this.OnKey("onKeyUp", e)}/>
		  </>
		)
	}
}

export default R071_OnKey;

3교시 (11:30-12:20)

080/App.js

import React, {Component} from 'react'
import StrAddButton from './StrAddButton'
import './App.css';

class App extends Component {
    render() {
        return (
            <div>
                <h1>Start React 200!</h1>
                <span>{this.props.store.getState().data.str}</span><br/>
                <StrAddButton store={this.props.store}/>
            </div>
        );
    }
}

export default App;

actions/index.js

export const ADD = 'ADD';
export const add = () => {
    return {
        type: ADD
    }
};

reducers/index.js

import {ADD} from '../actions'
import {combineReducers} from 'redux'

const initState = {
    str: 'react',
};

const data = (state = initState, action) => {
    switch (action.type) {
        case ADD:
            return state, {
                str: state.str + '200'
            };
        default:
            return state;
    }
};

const App = combineReducers({
    data
});

export default App;

StrAddButton.js

import React, {Component} from 'react';
import {add} from './actions'

class StrAddButton extends Component {
    render() {
        return (
            <input value='Add200' type="button" onClick={this.addString}/>
        )
    }

    addString = () => {
        this.props.store.dispatch(add());
    }
}

export default StrAddButton;

4교시 (12:30-13:20)

083/App.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import StrAddButton from './StrAddButton'
import './App.css'

// npm install --save redux
// npm install --save react-redux

// react-redux 장점
// 1. store 를 매번 상속하지 않고 사용가능
// 2. store 데이터를 사용, 변경하는 코드를 모듈화해 컴포넌트 내에 중복된 코드 사용 최소화

class App extends Component {
    render() {
        return (
            <div>
                <h1>Start React 200!</h1>
                {/* <span>{this.props.store.getState().data.str}</span><br/> */}
                <span>{this.props.str}</span><br/>
                {/* <StrAddButton store={this.props.store}/> */}
                <StrAddButton AppProp="200"/>
            </div>
        );
    }
}

let mapStateToProps = (state, props) => {
    console.log('Props from indes.js : ' + props.indexProp)
    return {
        str: state.data.str,
    };
};

App = connect(mapStateToProps, null)(App);

export default App;

actions/index.js

export const ADD = 'ADD';
export const add = () => {
    return {
        type: ADD
    }
};

reducers/index.js

import {ADD} from '../actions'
import {combineReducers} from 'redux'

const initState = {
    str: 'react',
};

const data = (state = initState, action) => {
    switch (action.type) {
        case ADD:
            return state, {
                str: state.str + '200'
            };
        default:
            return state;
    }
};

const App = combineReducers({
    data
});

export default App;

StrAddButton.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {add} from './actions'

class StrAddButton extends Component {
    render() {
        return (
            // <input value='Add200' type="button" onClick={this.addString}/>
            <input value='Add200' type="button" onClick={this.props.addString}/>
        )
    }

    // addString = () => {
    //     this.props.store.dispatch(add());
    // }
}

let mapDispatchToProps = (dispatch, props) => {
    console.log('Props from App.js : ' + props.AppProp)
    return {
        addString: () => dispatch(add())
    };
};

StrAddButton = connect(null, mapDispatchToProps)(StrAddButton);

export default StrAddButton;

5교시 (14:30-15:20)

프로젝트 진행

6교시 (15:30-16:20)

프로젝트 진행

7교시 (16:30-17:20)

프로젝트 진행

8교시 (17:30-18:30)

프로젝트 진행

Notes

728x90

저작자표시

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-07-15(금) 117일차 [Team Project] 프로젝트 진행 (0)	2022.07.19
22-07-14(목) 116일차 [Vue, Team Project] Vue란 (0)	2022.07.15
22-07-12(화) 114일차 [React, Android, Team Project] React의 FetchGet, FetchPost, AxiosGet, AxiosPost, Promise, 안드로이드 Hello Android! (0)	2022.07.13
22-07-11(월) 113일차 [React, Android, Team Project] React의 Reactstrapform, ReactstrapListGroup, ReactstrapModal, ReactstrapTable, 안드로이드 스튜디오 설치 (0)	2022.07.12
22-07-08(금) 112일차 [Team Project] 프로젝트 진행 (0)	2022.07.08

현재글22-07-13(수) 115일차 [React, Team Project] React onClick, onChange, OnKey, redux, 리눅스란

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

A New Life

22-07-13(수) 115일차 [React, Team Project] React onClick, onChange, OnKey, redux, 리눅스란

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

22-07-13(수) 115일차 [React, Team Project] React onClick, onChange, OnKey, redux, 리눅스란

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역