[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)에 의해 제어
    • ContainerSmart Component: 자신만의 State와 기능을 가진 여러개의 Dumb Component의 View로 구성된 Component > 스스로 기능을 구성하고, 그 기능을 각 컴포넌트를 이용해 제어



참고 ES6 *

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


|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  ···  |  240  |