Neo's Programming

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로 하긴 했는데..

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