#2. ReactJS 시작하기

CODEPEN 설정, ES6 클래스

 ES6클래스를 사용하기 위해 Preprocessor는 Bable을 사용한다. Codepen의 다음과 같은 기능을 사용하지 않고 설정을 하려면 node install 한후 그에 맞는 명령어를 옵션에 더해야한다. 이런 것도 IDE에서 제공해주는 편리한 기능인 것 같다. 

JSX의 특징

 XML 같인 생긴 애를 native Javascript로 변경해준다. 이게 어디서 동작하는가? Babel이 JSX Loader를 이용하여 코드를 변환해준다.

 질문 : HTML과 Javascript 즉 UI와 behavior를 한 곳에 짜는건 잘못된 거 아닌가요?

 => 간단한 application에서는 괜찮지만 규모가 큰 application에서는 수만개의 UI와 각각의 behavior가 있는데 이것을 각각 관리하는 건 쉽지가 않다.

 1) Container element가 필요하다. ( div로 감싸줘야 함 )

 2) { } : javascript 표현 방법

 3) Inline style

 4) 주석 처리 방법 : { /* ... */ }

Props  

 상위 컴포넌트에서 받은 값 ( 수정 불가 )

 컴포넌트 내부의 변하지 않는 값 ( Immutable Data )

 JSX 내부에 {this.props.propsName}

State

 자기 자신이 가지고 있는 값 ( 수정 가능 )

 유동적인 데이터

 JSX 내부에 {this.state.stateName}

 초기값 설정이 필수

 생성자 constructor에서 this.state={} 으로 설정

 값을 수정할때는 this.setState를 이용 ( 이걸 사용하는 이유가 React가 수정된 부분만 Rendering해주기 위함인데, 이를 사용하지 않으면 아무 소용이 없음 )

Component Mapping ( DataBinding )

 

 전화번호부와 같은 데이터가 있고 이를 표현할 리스트를 표현하려면 어떻게 해야될까? <li> 태그를 반복적으로 사용하면 가능할 것이다. 하지만! 표현하는 방법이 바뀐다면 100개의 리스트를 모두 바꿔주는 작업이 필요하다..... 이를 해결하는 방법을 알아보자. ( TOP의 databinding을 생각해보면 된다. )

코드의 문제점
 1) Model과 View 코드가 섞여 있어서 나중에 모델이 커진 경우 관리하기 힘듦
 2) <li> name = "" 의 반복적인 코드때문에 나중에 View 수정하기가 힘듦

map() 함수를 이용해서 해결

 자바스크립트 함수로 Java의 lambda를 생각하면 된다.

 - map ( 각각의 data가지고 어떻게 장난칠건데 )

 - arrow function : () => {}
    왼쪽 : paramater
    오른쪽 : 실제 동작 함수 정의

 

• ContactInfo : Component를 통한 뷰( name,phone을 나타내는 뷰 )를 작성

• 23 줄 : 하위 컴포넌트( ContactInfo ) 에 상태 ( props ) 를 주입하는 부분, 해당 문법은 React에서 사용하는 JSX

• 연락처를 추가,삭제하는 버튼 구현을 해야된다면? 일반화된 버튼 컴포넌트를 만들어서 재사용을 해도 되고, 기능이 너무 차이나면 각각의 컴포넌트를 만들어주면 된다. 물론, ContactInfo에 모두 나타내도 되지만 재사용이 불가능하게 된다.

Component LifeCycle API 

 

 Component가 DOM 위에 생성되기 전과 후, 데이터가 변경되어 상태를 업데이트 하기 전 후로 실행되는 메소드들이다. 이것들을 왜 써야 되는지 모르겠지만 나중에 꼭 필요한 경우가 있다고  한다...

 예제에 적용

- localStorage : HTML5 문법, 브라우저에 데이터를 저장하고 싶은 경우 사용한다. Cache와 비슷한것 같지만 cache는 4kb정도 저장 가능하지만, localStorage는 2.5MB~5MB정도가 가능하다. 그리고 서버로 전송이 되지 않는다.