ReactJs 공부노트 #1

공부노트는 내 공부를 하다 내 생각을 적은것일뿐 이게 정답이 아니므로 이거보고 아 그런가 하고 그대로 배우면 당신은 바아보~

---

ReactJs는 VirtualDOM방식을  이용한 SPA 개발언어? 정도로 이해가 됩니다.
VirtualDOM이란 일반적인 HTML에서 그리는 DOM을 그리기 이전에 가상의 DOM영역에 먼저 연산한 뒤에, 마지막에 일반 DOM에 그리는 이중 버퍼와 같은 기능입니다.

예를들어 하나의 이미 렌더 됀 페이지에서 새 node들 3개를 추가하려고 하면,
일반적인 DOM에서는 각각의 node들을 추가하면서 연산과 렌더 두가지 작업을 모두 처리하게 됩니다.

하지만 리엑트에서는 가상 DOM에서 세 node들을 연산한 뒤, 단 한번의 렌더 작업을 거치게 됩니다.

이는 SPA 어플리케이션에서 상당한 퍼포먼스 gain을 보장할 수 있을것 으로 보이나, 개발자의 말에 따르면 크게 빠르지는 않다고 합니다. 따지고 보면 그럴것이 가상 DOM을 이중 버퍼로 쓰이는건데, 결코 빠를 수는 없죠.
다만 이 리엑트를 사용할 경우, 일반적은 DOM에서 치뤄야할 최적화를 위한 작업들을 모두 대신 맡아 처리해 줄수 있다는 점 입니다.

참조 출처



리엑트는 JSX문법을 사용하게 되는데, 이는 필수는 아닙니다. 하지만 JSX문법을 이용함으로써 훨씬더 수월하고, 최적화된 방법으로 코드를 작성할 수 있기 때문에 사랑받고 있습니다.

React의 객체 단위

React에서 가장 작읜 객체는 
element 입니다.

const element = <div> hello world </div>
이는 일반적인 DOM오브젝트와 달리 단순한 plain 오브젝트입니다.

이러한 엘리멘트는 모두 ReactDOM 에서 관리를 하기 때문에, root DOM 이라고 부릅니다.
이러한 생성된 엘리먼트는 아래의 코드를 통해서 DOM에 삽입이 가능합니다.
reactDOM.render(element, document.getElementById('root'));


이렇게 만들어진 element객체는 불변객체이므로, 생성된 다음 자식이나 속성을 변경 할 수 없습니다. 이는 특정 시점의 UI이기 떄문입니다, 그럼 UI의 내부값들이 바뀌어야 하는것 입니다.
물론 강제로 element의 객채의 속성이나 자식을 바꿀수 있습니다.
reactDOM.render() 를 통해서 말이죠. 하지만 실제로 사용중인 react앱에서 이러한 render()행위는 보통 한번만 사용됩니다. 올바른 업데이트 방법이 아닙니다.
UI를 변경하고, 그 side effect를 고려하는것 보다, 고정된 UI에 내부의 값들의 변형에 의해 일어나는 side effects들을 고려하는것이 더 값싸기 때문입니다.


그럼 UI내부의 값들을 처리해 주기 위해서는 무엇이 필요한가 인데, 그것은 바로
Component 입니다.

Es5방식으로 보자면 이러한 함수입니다.
function Foo ( props ) {
 return <div> { props.bar } </div>
}

하나의 인자값 props 에 있는 객체들을 통해서 reactElement를 반환하고 있습니다.

이제 이코드를ES6으로 변환하면
class foo extends React.Component {
 render() {
  return <div>{this.props.bar}</div>
 }
}
이 될 수 있습니다.


const element = <div> hello world </div>

이 코드는 React element를 DOM태그로 나타낸 것 입니다.
이제 우리는 Component로 React element를 표현 할 수 있습니다.

const element = <Foo bar="hello world" />

이는 Foo()함수에 bar 이라는 props 를 담아 실행하여,dom tag를 리턴하며, element에 reactElement를 입력받게 됩니다.

이러한 사용자정의 Component와 DefaultDOM태그와의 차이점이 있으며, 이를 잘 숙지해야 합니다.

defaultDOM태그는 항상 소문자로 시작하며,
Component태그는 항상 대문자로 시작합니다.

추가적인 몇가지 규칙이나 표현식은 이곳 에서 알 수 있습니다.

이러한 Component들은다른 Component들을 참조할 수 있습니다.

class Bar extends React.Component {
 render() {
  return(
   <div>{this.props.name}</div>
  );
 }
}
class Foo extends React.Component {
 render() {
  return(
   <div>
    <Bar name="a"/>
    <Bar name="b"/>
   </div>
  );
 }
}
ReactDOM.render( <Foo/>, document.getElementById('root') );

props 는 read-only 입니다. 이를 위반해서는 안됩니다.
실제로 초기 React에서는 props를 통한 값들의 제어에 관해 관여하지 않았으나, 이를통해 원하는 결과가 나오지 않기에, 새로운 정책으로 props의 사용을 제한하기 시작했다고 합니다.

그럼 변수들은 어디서 관리해야 하는거냐 하면, 바로

state 입니다.

이는 props와 비슷하지만 조금 다릅니다. props는 Component의 parameter로써 이용되었으며, state 의 경우는 Component가 생성될 때에 Constructure 에서 생성됩니다.

그리고 이 state또한 변경에 대해서 매우 확실한 경로를 통해서만 해야합니다.
setState(callback) 입니다.
반드시 callback형식으로 setState 함수를 사용해야만이, 실제로 state값이 바뀜과 동시에 render처리까지 될수 있도록 연결되기 때문입니다. 임의로 값을 바꾸는 행위는 render가 되지 않음을 명시해야 합니다.