고정 헤더 영역
상세 컨텐츠
본문 제목
86일 - Vue.js를 통한 간단화, React가 나온 계기, React - 렌더링, 바벨 컴파일러, JSX, 컴포턴트 (feat. 바인딩의 필요성 - this가 undefined 나온 이유)
본문
728x90
계산기 프로그램
'덧셈' 누르면 값이 바뀌도록 하기
// 지금까지 해왔던 방법.
이 방법을 달리 해보자.
ajax 사용 이후, ajax 덕분에
- page 요청은 한 번만
- 그 다음에는 data 요청해서 화면을 갱신
근데 SPA로 하다보니 코드량이 너무 많았음.
-> 생산성을 높이기 위해 MVC 기반 프레임워크를 만듦 (Misko씨)
이 4개 중에서 코드량이 가장 많은 거 -> 4번 (과정의 90%는 4번)
Angular JS : MVW 패턴을 적용 (Whatever)
개발자는 x+y 만 짜면 되도록 해줌 (DOM 조작은 Angular가!... 근데 10년 전 얘기 ㅎㅎㅎ)
- 아류작들 : react, vue....
Q. 왜 지금은 Angular 대신 React를 사용할까?
- 그냥 '호감도' 차이
- 새로운 Angular가 나왔었는데... 기존 버전과 호환이 안됐었음. node js, typescript 등을 배워야 angular2를 알 수 있었음. 이거를 배우기 위해 많은 걸 배워야 하니 비호감 이미지가 됨 ㅠ
- 대안을 찾는 과정에서 react가 떠오름 (한국은 특히 고착화과 됨. java처럼. "react를 배워야 합니다.")
// 맨땅 코딩 ㅎㅎ
-> Vue.js로 간단히 고쳐보자.
html에서 코드 복붙한다음에 id만 바꿔주고
js에서 container 하나 만들어줘서 12, 16번째줄 수정
그리고 새로운 예제는 https://vuejs.org/v2/guide/ 여기서 코드 복붙해서 붙여넣기 (js 2~7번째줄 부분)
// 준비 끝!
3. 여기 element에다가
4. 이 데이터를 넣어달라
MVC 열광! (이전 것들은 다 잊어도 된당)
-> 그런데... Flux 쓸 때는 DOM을 사용해야한다. (지금은 Vue.js로 예제 보는 중)
자 list를 만들어보자.
append 이런 과정이 하나도 없었는데도 화면에 나왔다 ☆
model 마련하고 - 소비하는 one-way 뿐만 아니라, two-way도 가능
이벤트 처리를 해보자.
신기하닷.
왼쪽 17번째줄을 얻어오는 (querySelector같은) 과정이 하나도 없었는데도 불구하고 이벤트를 발생시킬 수 있다.
two-way 방식을 해보자.
오른쪽의 x,y는 내가 지어주는 이름
요지는 DOM 사용하지 않고도 가능하다는 것 + one way, two way 가능하다는 것
(Angular와 Vue.js는 이런 방식. 앵귤러는 학습 난이도가 있어서 지금 Vue.js로 배우는 중)
Q. React는 왜 나왔을까? Angular와 Vue.js와는 뭐가 다른걸까?
- flux는 one-way만 지원함
왜이렇게 만들었는지 이유를 들어보자.
action : 값이 바뀐걸 dom으로 받아서 보여주도록 하자.
- 메시지들 날라오면 action -> stores (저장했다가) -> views 보여주자 (이건 다른 그림)
페이스북 특징 상, 알람을 손실시키지 않기 위해 만든게 이해가 가기도 함. (two-way하면 모델 갱신하면서 다른 데이터 들어오면 알람이 손실되니까)
선생님 曰 : 존재 가치는 있으나, 각자 만드는 서비스에 맞게 사용하는게 좋다.
- model에 담는 데이터가 누적형이면 react가 좋고, 그렇지 않으면 dom 건들이지 않는 프레임워크를 사용하는게 좋겠다.
React를 다뤄보자.
리액트가 이런건 도와주긴 한다.
// 먼저 라이브러리를 가지고 와보자.
https://reactjs.org/docs/cdn-links.html
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
이거 말고 min도 있는데, 위에 코드가 에러 보기엔 좋아서 개발할 때는 위에걸로 서비스 할 때는 아래 min거로
위에 코드 html에 8,9번째줄에 넣어주고
오른쪽
2. 이 툴을 활용
3. 이 데이터를
4. 이 위치에 나타내줘
// 전에보다 편해짐!
그런데 js만 아는 것만으로 리액트를 배울 수는 없다.
ex) 태그가 들어간 녀석을 꼽고 싶다면?
3번째줄에서 "" 말고 -> 그냥 태그로만 감싸줘보자 -> 근데 오류남 <는 집어넣으면 안돼! 이러면서.
리액트는 'Babel 컴파일러'라는걸 따로 가지고 있음.
사실 우리는 바벨 js를 사용하고 있어서, 여기 문법에 틀리면 오류가 나는 것
- 많은 차이가 나지는 않는다.
* 바벨 컴파일러 *
- 이거랑 유사한 언어들 : Coffe Script (이미 유행 지남), Kotlin, TypeScript
- 트랜스파일러 (수평방향으로. 고급 언어 -> 고급 언어)
cf) 컴파일러 (수직방향으로. 고급 언어 -> 하위 버전 언어)
이 컴파일러를 달기만 하면 상위 버전 언어들을 우리가 막 사용할 수 있는 것
즉, 리액트는 바벨 도움을 받는 중. (= 바벨에 맞는 문법들 사용해야함)
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
순서 주의! (바벨이 라이브러리 위에 오도록. 번역기가 위에 와야하는건 너무나 당연)
// 바벨 컴파일러가 우리가 js에 쓴거를 해석하도록 해주자.
type 추가!
-> 그러면 오른쪽 3번째줄이 Hello React!로 화면에 잘 나옴 (h1 태그에 맞게 글씨 크기 크고, bold체로)
Q. 오른쪽 3번째줄
- 눈으로 보기에는 tag로 이루어진 문서로 보이지만 아니다.
virtual DOM임. 우리가 조작하고 싶은것을 여기에!
//
JSX
우선 js 식 정리 이렇게.
보통 3번째줄처럼 변수에 담아서 주는게 좋다.
Q. 지금 새로 고침하면 데이터(hi!!!로 적어준 것)가 사라져서 문제를 찾는 중...
오른쪽처럼 해줘야 함
자 다시, JSX로 돌아와서
1) 무조건 닫는 태그로
2) class도 네임으로
3) onclick 안되고 onClick으로
왼쪽 상자 - virtual DOM
이걸 읽은걸 - JSX <h1>Hello..부분
-> 이걸 화면에 반영하는게 ReacDOM.render...
세계 시간을 출력해보자.
이 예제 말고 ㅎㅎ 계산기로 해보자.
//
이런 ui 단위 = component라고 함
즉, 이건 '계산기 컴포넌트'
에러나는 이유는 JSX 구문에 맞지 않아서임
변수 사용 부분은 "" 안 됨. 중괄호로!
className으로
//
우선 위에 식에서 단일 태그들 다 닫아줌. <input..../> 이런 식으로, <br />
준비!
//
그런데도 오류남
//
사용자가 view를 바꿨는데,
model에 해당하는 store가 바뀌는게 아니라
action -> dispatch -> store -> view -> 입력값에 대한 onchange를 해서 dispatch로 다시 가야함
{x} 이 값은 바뀔 때 함수를 따로 정의해줘야함
// 근데 x=10; 넣어줘도 값이 바뀌지 않음
버퍼에다가 담는 작업이 필요.
리액트는 2가지 주요 저장소가 있다.
1) 프로퍼트, props
2) 스테이트
* 콤포넌트로 인자 전달하기 props *
function component
/
class componen도 있음
// 예저로 다뤄보자
우리가 만든 계산기 식처럼 보통은 만들지 않음
1) function component, class component 만들기
함수 맨 위에 만들어서 우리가 만든걸 다 감싸게 함
cf) class 단위로 component 만드는걸 기본으로.
// 만든걸 class로 바꿔보자
class Calc extends React.Component{
render라는 함수 필요
안에 const e1 = 계산기 html 붙여넣고
return e1;
}
// 리액트 개발시에는 무조건 component 필요하다.
앞으로 뭘 진행하겠다 하면 무조건 class /// exteds React.Compont { } 하고 시작하는 것
- 그래야 바인딩하는 데이터를 준비 가능
- store 개념을 가지고 있는 status(?)를 사용해야함
view에 추가되는건 일반적인 model 이 아님.
버퍼에 담겨있는데 층을 가지고 있는 녀석들.
// status를 알아보자. (어떻게 보면 리액트의 가장 중요한 특징)
| *정리* 1. 기본 틀 12~21번째줄 + 그걸 둘러싸고 있는 component (여기서는 Calc) 2. render 3. state = 화면을 구성하는 모델로 생각하면 됨. 화면의 상태값을 담고있는거로 생각 -> 그리고 바인딩함. |
//
근데 onChange 오류가 났다는 것
그래서 함수 만들어주고
store에 쌓이게 하기 위해, 조작을 추가해주자.
- 여기에 하나하나 있는게 state
새로운 변화는 '뒤에' 새로 담아줘야 함.
-> setState
근데 오류남.
this.setState 했는데 this가 undefined 되었다고.
console.log("this") 하고 x에 값 넣어보니 -> undefined
cf)
16번째줄 호출이 기능하구나... 근데 이렇게 하면 this가 안가겠네.
이게 왜 문제지?
- https://ubermensch-with.tistory.com/521
18. x는 3을 담은 '그릇'
19. y는 x의 또 다른 이름, 별칭인 것
21. x는 참조변수/이름
22. y는 x의 또 다른 이름, 별칭인 것
728x90
반응형
