[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에 연결된 프로퍼티는 대상이 아님


[ReactJS] create-react-app 설치와 샘플 실행

create-react-app에 대하여

  • 이 오픈소스는 facebook incubator라는 Github에 위치
  • create-react-app을 사용하는 주요한 이유는 React를 사용함에 있어 발생하는 많은 설정의 어려움을 해소하기 위해 개발되었습니다. ( 참고: https://techstory.shma.so/create-react-app%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC-1-935a21297550)
  • 기본적으로 ES2015문법을 지원하며 watchify가 기본설정으로 지정되어 있어 쉽게 작업할 수 있습니다.
    • create-react-app 덕분에 npm과 yarn을 설치하고 create-react-app을 설치한 후 샘플 프로젝트를 실행하는 시간은 불과 몇 분안에 끝이 납니다.
    • npm (혹은 yarn) 설치 > create-react-app 설치 > create-react-app [hello-world](샘플프로젝트가칭) 프로젝트 생성 > 실행 끝

npm을 이용하여 create-react-app설치하기 (Windows 환경 기준)

  • npm 설치방법은 여기를 참고하세요.

  1. Windows - command 프로그램을 실행합니다.
  2. command 창에 아래의 명령어를 실행하여 create-react-app을 설치합니다.
    • $ npm -g install create-react-app

        • npm에서 종속된 관련 라이브러리를 다운받아 설치를 진행합니다.
        • 설치가 완료되면 아래와 같이 완료 화면을 확인할 수 있습니다.

      • 설치가 완료되면 어디에 설치가 되었는지 친절하게 표시합니다.

설치 확인 방법

    • windows command 창에서 아래의 명령어를 실행하세요.
    • create-react-app --version



create-react-app 을 사용하여 샘플프로젝트를 생성하고 페이지 실행(확인) - (Windows 환경 기준)

  • create-react-app을 사용하면 손쉽게 프로젝트를 생성할 수 있습니다.
  • Windows의 command 에서 아래와 같이 명령어를 실행 해보세요.
    • $project_home$ > create-react-app hello-world
      • 위의 화면과 같이 설치가 실행됩니다.
      • 프로젝트의 설치는 해당 폴더에 프로젝트의 지정된 이름 (위 예제에서는 hello-world)으로 실행됩니다.
    • 필요한 라이브러리를 다운받는 과정이 지나가고 설치가 끝나면 happy hacking! 이라는 메시지와 함께 종료됩니다.
    • 설치로그 (참고)

        • 위의 설치로그를 확인하여 무엇을 작업하였는지 확인할 수 있습니다.
        • 샘플 프로젝트를 생성할 때 860개의 새로운  dependencies가 함께 저장된 것을 볼 수 있습니다.
  • 샘플 프로젝트 실행
    1. 프로젝트가 설치된 폴더로 이동

      cd $project_folder$/hello-world
    2. yarn start 를 이용하여 프로젝트 실행
    3. 실행 확인 locahost:3000

create-react-app 을 이용하여 생성된 프로젝트의 구성요소 확인

  • 샘플 프로젝트를 설치한 이후 소스의 위치를 찾아보면 아래와 같이 구성되어 있음을 확인할 수 있습니다.
  • 프로젝트를 빌드하기 위한 필수구성요소 파일 (즉, 없으면 안되는 중요한 파일) ※삭제금지
    • public/index.html
      • 페이지 템플릿
    • src/index.js
      • javascript 진입점. (임의 수정할 경우 올바르게 표시되지 않을 수 있습니다.)
  • hello-world / 프로젝트의 ROOT
    • package.json (임의 수정 및 편집 금지)
      • 프로젝트에 사용되는 dependencies 를 정의한 파일
  • src 디렉터리 (하위 포함)
    • Webpack이 인지하는 폴더이며 이외의 다른 폴더에 위치한 js 혹은 css 파일은  Webpack이 관여하지 않습니다.


javascript- 성능향상 코딩법 (링크)

http://blog.monitis.com/index.php/2011/05/15/30-tips-to-improve-javascript-performance/


http://www.yourhtmlsource.com/optimisation/imageoptimisation.html



작성 중
Tag // javascript

JavaScript-Array to JSON 변환하기

Content_TopTitle-JavaScript

 

JavaScript 에서 아래와 같은 Array 형식의 데이터를 JSON 으로 변환할 수 있습니다.

 

[1]. JSON.stringify() 를 사용하기 위해서 아래의 라이브러리를 사용합니다.

>>> https://github.com/douglascrockford/JSON-js/blob/master/json2.js

[2]. 그리고 아래와 같이 사용할 수 있습니다.

 

var yourArray = {
    url: "http://www.google.com",
    realWidth: 60,
    realHeight: 80,
    realVCm: 20,
    realHCm: 15
};
var myJsonString = JSON.stringify(yourArray);

 

 

[3]. 또한 변환한 JSON 데이터는 jQuery 라이브러리를 사용하여 아래와 같이 Array 유형으로 변환할 수 있습니다.

 

var yourJSONString = "{\"url\":\"/http://www.google.com/\",\"realWidth\":60,\"realHeight\":80,\"realVCm\":20,\"realHCm\":15}"; 

var parsedJSONString = $.parseJSON(yourJSONString); 
|  1  |