React 강의 정리 (2)

Codepen 환경설정

• React
• ReactDOM
• Babel : 웹사이트 호환을 위해 ES6 -> ES5 해주는 역할

 

 

 

ES6 의 class

• 익명 클래스 지원
• static 메소드 지원
• 상속 지원
• super

 

 

 

ES6의 let : 블록 scope 

var 는 메소드 scope 이다.

 

 

 

JSX

• React component 안의 render 메소드에 작성되는 Javascript extension
• " " 없이 XML-like syntax 를 작성한다. ( ) 으로 대체해서 쓰긴하지만 괄호를 안써도 되긴한다.
• 모든 JSX Element 코드는 Container element 에 포함되어야한다. (ex. <div>)
• JSX 안의 JS 표현은 { } 으로 한다. (ex. <button>{this.props.buttonText}</button>)
• JSX 안의 Style 설정은 snake case 형식의 String 이 아닌 camel case 객체로 표현한다.
• JSX 안의 element 의 class 설정은 class 가 아닌 className 을 이용한다.
• JSX 안의 주석은 {/* ... */} 를 사용한다. 

class MyComponent extends React.Component{
  render() {
    let style = {
      color:'aqua',
      backgroundColor:'black'
    }
    return (
      <div className="box" style={style}>hello world </div>
    )
  }
}

 

 

 

this.props

• 컴포넌트 내부의 Immutable data
• this.props 는 상위 컴포넌트에서 내려주는 값이라고 의미하면 좋다.
• this.props 그 자체를 하위 컴포넌트로 delegate 할수도 있다.
• this.props 안에 객체 형태로 데이터를 받아와 사용할 수도 있다.
• this.props.children 은 상위 컴포넌트로 만들어진 element tag 안의 inner text 를 참조할 수 있다.
• ComponentName.defaultProps 를 이용하면 props 안의 값에 기본 값을 설정할 수 있다.
• ComponentName.propTypes 를 이용하면 props 안에 들어갈 수 있는 타입 검증을 할 수 있다.

class MyComponent1 extends React.Component{
  render() {
    return (
      <div>
        <h2>{this.props.children}</h2>
        <h3>{this.props.value1}</h3>
        <h3>{this.props.value2}</h3>
        <h3>{this.props.value3}</h3>
      </div>
    )
  }
}

MyComponent1.defaultProps = {
  value1: "Hello World",
  value2: 123456789,
  value3: 100.0
}


MyComponent1.propType = {
  value1: React.PropTypes.string,
  value2: React.PropTypes.number,
  value3: React.PropTypes.any.isRequired
}

class MyComponent0 extends React.Component{
  render() {
    return (
      <MyComponent1>This is 'this.props.children' value</MyComponent1>
    )
  }
}

 

 

 

this.state

• constructor 안에서 초기 값 설정이 필수다.
• 값의 변경은 렌더링 이후 this.setState({...})를 사용해야한다.
• 값의 변경은 this.sate = ~ 를 이용해선 안된다.

 

 

 

컴포넌트 맵핑

• 데이터 배열을 렌더링할 때 사용하면 유용하다.
• callback 함수를 arrow function 을 이용해 표현할 수 있다.

let myArray1 = [1,2,3,4,5]
let myArray2 = myArray.map((value, index) => {
  return value * value;
})

 

 

 

메소드 바인딩

1. Component 안의 메소드에서 this를 사용해야할 때가 있다.
2. this.state, this.setState 가 그런 경우들이다.
3. 이 때  메소드 입장에서 this 가 무엇인지 모른다. (자바스크립트 언어 자체가 가지고 있는 설계 때문인 듯?)
4. 그러므로 이 메소드안에서 사용되는 this 가 어떤 것인지 이를 바인딩 해줄 필요가 있다.
5. 아래 예제의 handleClick 에서 bind(this) 해주는 이유가 그러하다.
6. 메소드 바인딩은 호출하는 시점에서 바로 할 수도 있지만 생성자에서 하는 것이 convention 상 더 예쁘다.

 

 

 

카운터 예제

class Counter extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
    this.onClickHandler = this.onClickHandler.bind(this);
  }
  
  onClickHandler() {
    this.setState({
      value: this.state.value + 1
    });
  }
  
  render() {
    return (
      <div>
        <h2>{this.state.value}<h2>
        <button onClick={this.onClickHandler}>Count up</button>
      </div>
    )
  }
}

class Application extends React.Component {
  render() {
    return(
      <div>
        <Counter/>
      </div>
    )
  }
}

ReactDOM.render(
  <Application/>, 
  document.querySelector("#root")
);

주의 : 핸들러를 이벤트의 callback 으로 넣어줄 때 핸들러가 메소드라고 핸들러 뒤에 괄호를 붙여선 안된다.

(렌더링 -> 메소드 호출 -> this.setState 호출 -> 렌더링 -> 메소드 호출 -> this.setState 호출  -> ...) 이 될 수 있다.

사견 : syntax 적으로도 callback 으로 어떤 핸들러 메소드가 호출되어야하는지 식별자를 건내주는 것이 당연한 듯 싶다.