[ReactJS] React JSX, VirtualDOM, Component, Prop, State

Lifecycle

JSX (JavaScript XML)

1. React JSX는 XML-like Syntax를 native Javascript로 변환. ""로 감싸지 않으며 순수하게 작성. 시작과 끝에 ()를 사용하여 가독성 유지하는 것을 권장.

   Sample

   class Contents extends Component {     render() {         return (             <div>                 <h3>Welcome React!</h3>                 <div>                     <UserInfoForm />                 </div>             </div>         )     } };

2. Nested Elements: 단일 컴포넌트에서 여러개의 Element를 render할 경우 그 element들은 하나의 wrapper(container) element안에 포함시켜야 한다.
   • Question: wrapper element가 될 수 있는 대상 element는 어떤 것들이 있을까?
3. Javascript 표현식 사용
   1. JSX안에서 {}를 사용하여 간단하게 표현식 표기

   2. {sample} 과 같이 표현가능

      Sample

      var 또는 let 변수 > sample = var sample = "a";

4. 임의의 method를 생성하여 사용할 수 있음

   helloMessage() {     alert("hi there"); } render() {     return ( ... ) }

5. 일부 속성들은 javascript의 예약어를 피하기 위해 예를 들어 'class=...'는 'className=...'과 같이 사용해야 한다.  (http://facebook.github.io/react/docs/tags-and-attributes.html)

Virtual DOM

1. React에서는 가상 DOM이 생성되어서 조작이 됨.
2. 이 가상 DOM은 고유의 Lifecycle이 존재함.
   

Component

• 컴포넌트에는 여러개의 컴포넌트를 변환할 수 없으며 wrapper 형으로 이뤄진 단 하나의 element만 변환할 수 있다.
  1. Prop
     • 변하지 않는 값. 내부에서 변경되어서는 안되는 값. 외부에서 전달하는 값.
       • 다음과 같이 참조하여 사용할 수 있음 -> this.props.xxx
     • 객체, 함수 등 어떠한 타입으로도 지정할 수 있음.
     • 예: A라는 컴포넌트에서 B라는 컴포넌트로 데이터(혹은 값)를 전달하기 위해 사용
  2. State
     • 변하는 값: 자신의 상태값을 변경시키는 값
       • 이 값은 외부에서 변경되지 않고 내부에서 직접 변경하는 값.
         • 외부 컴포넌트에서 prop로 전달된 값을 자기(컴포넌트)의 state에 설정하거나 변경 (setState( ... )를 이용.)
     • state를 변경할 때 사용하는 위치는 컴포넌트의 생명주기에 따라 조심해서 다뤄야 한다.
     • 사용할 수 없는 곳에서 사용할 경우 무한루프에 빠질 가능성이 있다.
       • 예; 사용해서는 안되는 곳의 주요 이벤트핸들러(메서드)
         • componentWillReceiveProps ( .... )
       • 이에 관련된 자세한 내용은 앞으로 다룰 Lifecycle과 함께 업데이트 예정( ... )
• Update 2017.07.26: 컴포넌트를 아래와 같이 분류할 수 있다.
  • Component : Dumb Component : Props 만을 받으며 오직 화면의 View 영역만으로 구성된 Component > 스스로 능동적인 행위를 하지 못하고 호출자(Smart Component)에 의해 제어
  • Container: Smart Component: 자신만의 State와 기능을 가진 여러개의 Dumb Component의 View로 구성된 Component > 스스로 기능을 구성하고, 그 기능을 각 컴포넌트를 이용해 제어

Sample Code 를 살펴보고 이해하기

• 참고슬라이드 ( https://www.slideshare.net/taggon/reactjs-55995670?qid=8cefbefe-5e52-457c-ae2a-a46b526899ba&v=&b=&from_search=2 )

참고 ES6 *

1. Arrow Function type
   • let a = (a, b) => { ... } // this => function { } <- ..여기가 this.. 
   • Lamda function
2. for-in, for-of
   • for-in: 오프젝트에서 열거가능한 프로퍼티가 대상
   • for-of: 오브젝트가 대상, prototype에 연결된 프로퍼티는 대상이 아님