211019 리액트 입문

w#리액트란?

*자동 업데이트

*UI = render(state)

*render 함수는 순수함수로 작성할것.

  랜덤 함수 X 상태 변경하지 말기

*state는 불변 변수로 관리하기

 *가상 돔 virtual dom -> UI 빠르게 업뎃 가능. 변경된 부분만 실제로 적용하여 불필요한 업뎃 X

  순수 자바스크립트가 더 빠르긴 하다

 

#순수 리액트란?

React는 javaScript 라이브러리다.

프레임워크처럼 사용법을 적용해놓았으므로 프레임워크라고 봐도 될지도.

자바스크립트라이브러리 이므로 <script/> 태그로 로딩만 하면 된다. 설치할 필요가 없다. 

 

npm, 바벨등으로 설치하는 것은 다른 라이브러리를 사용하기 위해서 이므로, 순수 리액트만 사용한다는 것은

자바스크립트를 구동할 수 있는 브라우져 + 메모장하나로도 개발할수 있는 것.

 

#React.createElement 사용하기

<div>

<p>hello</p>

<p>world</p>

</div>

위와 같은 ui를 표현하기 위해 createElement를 작성하려면

 

children으로 p태그를 열어주고

React.createElement(

 'div',

 null,

 React.createElement('p', null, 'hello'),

 React.createElement('p', null, 'world')

)

DOM의 여러 요소에 렌더링 하기?

기본 1개는

const domContainer = document.getElementById('root')

ReactDOM.render(React.createElement(XButton), domContainer)

 

여러개는

 

ReactDOM.render(React.createElement(XButton), domContainer1)

ReactDOM.render(React.createElement(XButton), domContainer2)

ReactDOM.render(React.createElement(XButton), domContainerN)

 

이렇게 각각의 상태값을 갖는 독립 DOM을 렌더할 수 있다.

그러나 React 안에서 해결하는것이 좋으며,

 

ReactDOM.render( 리액트 엘리먼트, 붙일 컨테이너)
React.createElement(태그명 혹은 리액트 엘리먼트, 무슨값이지, 리액트 엘리먼트 ... )

이렇게 할 수 있다.