What is React ?
React는 선언형 프로그래밍이라 한다. (Declarative)
적혀있는 구조와 기능들을 직관적으로 파악할수 있다.
얼마든 선언형으로 쓰지않고 하는방법은있다.
a코드
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);b코드
import './App.css';
import React, {useState} from 'react';
import {Questions} from './Questions';
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
page : 0,
};
}
render() {
return {
<div className ="App">
<div>달력</div>
<div>자유로운일정</div>
<div className = "selectPage">
<div>example</div>
</div>
</div>
);
)
}
export default App;사실 코드 내용은 다르다. 그런데 , 하지만 이런 코드를 협업와중 디자이너에게 보여준다면 직관적으로 이해하긴 힘들것이다. (출력시 hello 라고 뜬다.)
그런데 확실히 b코드가 직관적으로 대략 이런내용이구나.. 라는 생각이 들기 쉽다.
사실 리액트가 createElement를 구현하는것은 중요한것은 아니다. 지금 당장 해야할것은
웹을 만들어 구현하는것이다. 리액트의 자세한것은 알면 좋다. 알아야 하지만, 기능을 구현하는것이 중요하다. 지금 우리가 디테일 하게 공부할 곳은 따로 있다(자료구조와 알고리즘.)
당장 내일 개발 하는것은
기능이 어떻게 구현되어있는가 ? 지금 이 기능은 무엇을하고있는가? 어디에 위치하는가?
실제 기능과 최대한 닮아야한다. 이런점이 중요한듯하다.
리액트의 가장큰 장점이다. 바로 '직관적' 인 것이다.
(반드시 jsx는 사용할 필요는없지만..)
조금 더 디테일 한 개념은 공식사이트 참조
JSX소개
Babel..?
리액트는 babel을 사용한다.
사실 수업중에 언급되었을때 문득 궁금하였다.
일종의 컴파일러 장치인듯한데..
위키 검색결과
주로 자바스크립트의 최신 문법으로 작성한 코드를 웹 브라우저와의 호환을 위해 이전 버전의 문법으로 재작성하는 역할을 하는 프로그램이다.
가령 ES6에서 새로 추가된 문법으로 작성한 코드를 해당 문법을 아직 제대로 못 읽는 브라우저와의 호환을 위해 ES5 문법으로 재작성한다든지.
이런 결과가 나왔다.
그러니까 최신 문법으로 작성한 코드를 이전버전의 문법으로 재 작성해주는 역할인것이다.
리액트가 러닝커버가 높다고 하는데, 자바스크립트를 잘하면 높지않다고 한다.
캡슐화?
하나의 componet 단위로 저장할 수 있다.
은닉화. 한 component에서 발생된 사건이 다른 component에서 발생할 수없다. 이것이 '은닉화'이다.
우리가 코드를 봤을때, 결과물들을 상상할 수 있도록 하나의 단위가 되는것이다.
사실 컴퓨터는 a코드와 같이 작성해도 작동하는데에 무리가 없으나, 작업하는 사람의 입장에선 알아보기가 매우 힘들다. 'OOP'에서 붕어빵틀과 붕어빵이야기를 하곤하지만 우린 그것을 상상할 수가없다. 굳이 우리가 코드 이름을 그렇게 지어주고 한것은 사람이 코드를 보고 결과물을 사람이 상상할수 있음이다.
