Neo's Programming

Class Component

import React, {Component} from 'react';

class App extends Component{
render(){
return(

React {this.props.속성명}

);
}
}
export default App;

Function Component

import React from 'react';

function App(props){
return(

React {props.속성명}

)
}
export default App;

import React from 'react';

const App({data}){
return(

React {data}

)
}
export default App;
->return 생략 가능

state, LifeCycle API를 이용하여야 할 때만 Class Component 사용하는 것이 좋다.
이는 속도에 의한 차이이다.

총 열가지의 LifeCycle 메서드 존재
Will 접두사 - 작업 전 동작
Did 접두사 - 작업 후 동작

LifeCycle
- Mount, Update, UnMount로 분류

Mount
- Dom 생성 의한 웹브라우저 상 컴포넌트 활성화

Mount Call Method
constructor - 컴포넌트를 만들시 호출되는 클래스 생성자
getDerivedStateFromProps - props 값을 state 동기화 메서드
Ex)
static getDerivedStateFromProps(nextProps, prevState){
if(nextProps.value!==prevState.value){
return {value:nextProps.value};
}
return null
}
render - UI 렌더링 함수
componentDidMount - 컴포넌트가 웹브라우저 상 활성화 후 호출 메서드

Update
- porps,state 변경
- component 리렌더링
- this.forceUpdate 강제 렌더링 트리거
getDerivedStateFromProps - props 변경 시 호출
shouldComponentUpdate - 컴포넌트 리렌더링 여부 결정, state 변경 시점
Ex)
shouldComponentUpdate(nextProps, prevState)
메서드 생성하지 않으면 항상 true
render - 컴포넌트 리렌더링
getSnapshotBeforeUpdate - 변화된 내용을 DOM 반영 전 호출
Ex)
getSnapshotBeforeUpdate(prevProps, prevState)
이전 속성과 현재 상태의 속성 데이터 비교하여 처리 가능
componentDidUpdate - 컴포넌트 업데이트 끝난 후 호출
Ex)
componentDidUpdate(prevProps, prevState, snapShot)
전,후 컴포넌트의 데이터 접근 가능. 반환값이 있다면 snapShot에서 확인 가능

UnMount
- 컴포넌트를 DOM에서 제거
componentWillUnmount - 웹브라우저에서 컴포넌트가 사라지기 전 호출

state={

datas:['A','B','C',

data:''

}

state 기반 Array 형태 데이터 추가

Ex)

hadleInsert=()=>{

this.setState({

datas: this.state.datas.concat(this.state.data),

data:''

}

)

}

state 기반 Array 형태 데이터 삭제

handleRemove=(index)=>{

const {datas} = this.state;

this.setState({

dates:[

...datas.slice(0,index),

...datas.slice(index+1, datas.length)

]

}

)

}

const list = this.satae.data.map(

(data, index)=>(

<li key={index} onClick={()=>this.handleRemove(index)>

{data}

</li>

)

}

ES6 적용

this.state.datas.slice(0,index).concat(this.state.datas.slice(index+1,this.state.length))

filter 함수

- 배열의 특정 조건 만족 값만 추출 후 새로운 배열 생성

Ex)

const {datas} = this.state;

this.setState({

datas:data.filter((item,i)=>i!==index)

}

)

}

HTML은 id를 이용
Ex)

React Comonent에서는 id값을 이용할 경우 DOM 렌더링시 충돌이 일어 날 수 있어서 ref를 이용

ref
- DOM을 직접 접근 할 시 사용
  포커스 등
- props 설정과 동일하게 처리
- 콜백 함수 전달
- 컴포넌트 상에 ref 이용 가능, 외부에서 접근 시 사용

Ex)

<input ref={(ref)=>{this.input=ref}></input>

컴포넌트 내부 메서드
Component를 extends 받은 컴포넌트 내부에 구현
Ex)ScollBox
const { scrollheight, clientHeight} = this.box;
메서드명 = () =>{
this.box.sctollTop = scrollheight - clientHeight;
}

ref 연결 후 내부 메서드 사용

<div>
<ScrollBox ref={(ref)=>this.scrollBox=ref}/>
<button onClick={()=>this.scrollBox.메서드명()}>클릭</button>

</div>

이벤트
- 웹 브라우저와 DOM 요소간의 상호 작용
- camelCase로 이벤트 명 작성
- 함수 형태 값 전달
- DOM 요소에만 설정
- 컴포넌트 자체 이벤트 설정은 불가하지만 props를 이용한 설정은 가능
Ex)

<div onClick={this.props.onClick}>{}</div>

<input onChange={

(e)=>{
console.log('onChange');
console.log(e.target.value);//변경되고 있는 값
}
}/>

state = {
message: ''
}

<input type="text" name="message" placeholder="input" value=this.state.message

onChange={
(e)=>{
this.setState({
message:e.target.value
}
)
}
}>

</input>

이벤트 기본 방식

state={
message:''
}
constructor(props){
supter(props);
this.hadleChange=this.hadleChange.bind(this);
this.hadleClick=this.hadleClick.bind(this);
}

hadleChange(e){
this.setState({
message:e.target.value
}
)
}

hadleClick(){
this.setState({
message:''
}
)
}

<input value={this.staet.message} onChange={this.hadleChange}/>

<button onClick={this.hadleClick}/>

Propperty Initialize Syntax
- constructor 수정 할 필요가 없다
- 이벤트 기본 방식 코드 중 아래와 같이 수정하여 사용하면 된다
- constructor는 제외
hadleChange = (e) => {
this.setState({
message:e.target.value
}
)
}

hadleClick = () => {
this.setState({
message:''
}
)
}

이벤트가 여러개 일경우
state = {
A:'',
B:''
}

hadleChange=(e)=>{
this.setState({
[e.target.name]:e.target.value
}
)
}

hadleClick=()=>{
this.setState({
A:'',B:''
}
)
}

hadleKeyPress=(e)=>{
if(e.key==='Enter'){
this.hadleClick();
}
}

<input name="A" vlaue={this.state.message} onChange={this.hadleChange} onClick={this.hadleClick} onKeyPress={this.hadleKeyPress/>

<input name="B" vlaue={this.state.message} onChange={this.hadleChange} onClick={this.hadleClick} onKeyPress={this.hadleKeyPress/>

Component

- 데이터에 따른 UI 형성
- Life Cycle API 의한 컴포넌트가 화면상 변화가 일어 날 때 처리
- 메서드 이용하여 기능 추가

- export 이용하여 사용

- 불러 올 경우 import 컴포넌트 from './컴포넌트'

props
- 속성 사용
  렌더링->값 설정->기본 값 설정-> 값 검증

Ex)

<div>{this.props.속성명}></div>

속성 값 설정
호출.js
<컴포넌트 test="test"/>

속성 기본 값 설정
default props
컴포넌트.js
컴포넌트.defaultProps={
test : '기본 속성 값'
}

속성 검증
import PropTypes from 'prop-types'

컴포넌트.PropTypes ={
속성 명 : PropTypes.string//설정
}

static defaultProps = {
속성 명 : '속성 값'
}
static propTypes = {
속성 명 : PropTypes.string
}

숫자 값 경우 ""이 아니라 {} 처리 해서 넘겨야한다

필수적인 요소로 지정하려면 isRequired 처리
속성 명 : PropTypes.string.isRequired

state
- props는 부모 컴포넌트에서 설정
- 컴포넌트 자신은 props를 읽기 전용으로만 접근이 가능하여 state 이용
- this.setState() 이용하여 업데이트 처리

- state 초기 값은 컴포넌트 생성자 method constructor 내부에서 설정
Ex)
constructor(props){
super(props);
this.state={
number : 0
}
}

or

state = {
number : 0
}

{this.state.number}

변경 시
onClick=()=>{
this.setState({
number: this.state.number+1
}
)
}

배열 처리되어 있는 데이터를 이용하여 Component 처리

render(){

const arr = ['A','B','C'];

const arrList = arr.map(

(arrData, idx)=>(<li key={idx}>{arrData}</li>)

);

return(

<ul>

{arrList}

</ul>

->map 처리 시 key 값이 존재해야한다. 이는 데이터가 가진 고유의 값이 필요하기 때문이다

->arr 처리가 된 것을 state 처리를 하여 사용 가능하다

state={

arr = ['A','B','C']

}

arr.map => this.state.map 으로 변경하여 처리하면 된다.

JSX
- Javascript 확장 문법, XML과 비슷
- 가독성이 높다
Ex)
var a=(

<div>

<h1>JSX</h1>

</div>)

- 반드시 부모요소로 감싸야한다.

  DOM 트리 구조 하나여야하기 때문

const(ES6)
- 변경 불가능한 상수

let(ES6)
- 동적인 값 저장

Ex)

const a = 'const'

<h1>{a}</h1>

- const와 let은 scope 영역에서 사용, var과는 다르다

JSX 내부의 if

- 삼항 연산자를 이용

Ex)
const a = true;
{ a ? 't' : 'f' }

null 이외의  false값 렌더링 할 시 && 연산자 이용

{ a && 't }

DOM 요소에 스타일 적용 시 문자열 적용이 되지 않으나 CSS 스타일을 Javascript 형식으로 적용 가능

- camelCase key 사용

Ex)

const style = {
backgroundColor : 'gray'
}

<div style={style}></div>

className 사용

Ex)

A.css
.my-div{
backgroundColor : 'gray'
}

A.js

import './A.css'

<div className="my-div"></div>

주석 처리는 {/*주석*'} 형식으로 한다.

1. React
- 오직 View만 신경쓰는 라이브러리
- 지속적으로 데이터가 변화하는 대규모 어플리케이션 구축 용도
- 단순 라우팅 정도면 정적이 페이지가 효율

2. 렌더링
- 사용자 화면에 뷰를 보여 주는 것
- 초기 렌더링 reder(){}함수에서 처리
- 재귀적 렌더링 일어남
- 렌더링 작업이 종료 시점에서 html markup 생성되고 dom 요소에 주입
- html 코드 생성 후 dom에 해당 내용 주입하면 이벤트가 적용

3. 조화 과정
- 뷰를 업데이트
- 뷰의 요소가 변경
- reder()에 의하여 발생
- 전,후 DOM 노드들을 비교하여 업데이트

DOM(Document Object Model)
- 객체를 문서 구조로 표현하고 XML이나 HTML로 작성

4. Vitual DOM
- 실제 DOM에 접근하는 것이 아니라 추상화된 Javascript 객체를 구성하여 사용
->데이터 업데이트 중 UI를 Viture DOM 리렌더링
-> 이전, 현재 내용 비교하여 바뀐 부분만 DOM 적용

5. 리액트와 Vitual DOM은 업데이트 처리 간결성 제공

정말 오랜만에 포스팅을 해 보는 듯..

태블릿 환경과 동일하게 CS 프로그램을 구현하던 중..

Canvas를 쓸 일이 있어서 처음으로 WPF를 적용하다가 멘붕이 왔다..

MouseMove를 통하여 Canvas에 그림을 그리는...

단.. 다른 컴포넌트들로 구성된 화면 상단에 보여지는...

암만 그려도 이상하게 나오거나 화면이 표출 되지 않았다..

결국 해결책은...

화면에 표기 되는 UserControl 위에 Canvas를 올리고

<Canvas.Background>
            <VisualBrush TileMode="Tile"
                Viewport="0,0,0,0" ViewportUnits="Absolute"
                Viewbox="0,0,0,0" ViewboxUnits="Absolute">
            </VisualBrush>
</Canvas.Background>

이 부분을 넣어 봤다.

모눈 형태 화면이 보일지 해서 확인을 하는 용도로 썼는데 어라?

그림이 그려진다.

근데 다시 저걸 지우고 하니 아래 코드가 먹지 않았다.

        Point currentPoint = new Point();

        SolidColorBrush brush = new SolidColorBrush(Colors.Blue);

        public UserControl1()
        {
            InitializeComponent();
        }

        private void DrawCanvs_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                Line newLine = new Line();
                newLine.Stroke = brush;
                newLine.X1 = currentPoint.X;
                newLine.Y1 = currentPoint.Y;
                newLine.X2 = e.GetPosition(canvas1).X;
                newLine.Y2 = e.GetPosition(canvas1).Y;
                newLine.StrokeThickness = 3;
                canvas1.Children.Add(newLine);
                currentPoint = e.GetPosition(canvas1);
            }
        }

        private void DrawCanvs_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                currentPoint = e.GetPosition(canvas1);
            }
        }

결국 스스로 얻은 결론은.. BackGround 설정이 없다면 제대로 표시되지 않는걸로 잠정 결론을 내렸다..

불론 Canvas에만 그리기라면 위 코드는 정상적으로 동작한다.

WPF 메인->컨트롤->그림 그리기 할 경우에

Canvas를 올리고 그 위에 컨트롤들을 올리는 형태로 배치를 하면..

이런 식으로 그리기가 가능하다.

자바에서 Canvas 생각이 나서 구현을 한건데..

C#에서 Transform을 구현하고 하면.. 그 아래 컨트롤에 접근 못해 결국 WPF로 하긴 했는데..

아... 남은 작업들을 어찌할꼬 ㅠㅠ

C#에서 SQLLite를.. 열고 닫고.. 하면 table is locked

-_-...

처음은 잘된다.. 근데.. 두번째 부터는 저런 메세지가 뜬다..

하지만 당황하지 말자..

open->close 끝이라 생각하면 바로 걸리니..

connection을 dispose 걸어주고 command까지 dispose 걸어주면 바로 해결이 된다..

당황스런 시츄에이션.. 이건 좀 ㅠㅠ 아닌거 같아 ㅠㅠㅠ