[React] 기본정리

React 공부 시작.

 

* 모든 React 컴포넌트는 render 메소드가 있다.

  -> 컴포넌트가 어떻게 생길지 정의해준다.

 

* JSX

  -> js코드에서 html형식을 그대로 작성할 수 있다. 

  -> xml같은 문법을 native javascript로 변환

  -> 괄호를 안해도 오류나진 않지만, 가독성을 위해 사용하는게 좋음

//0.기본 구조.

//--------------------------------------------------------------
class Codelab extends React.Component {
  render() {
    return ( <div>Codelab</div>);
}
)

class App extend React.Component {
 render () {
   return (
     <Codelab/>
   );
 }
}
ReactDOM.render(<App/>, document.getElementById('root'));
//--------------------------------------------------------------
//index.html

<div id="root"></div>

 

1. 컴포넌트에서 여러 Element를 렌더링할때 꼭 모든 jsx코드는 container element안에 포함해야한다.

 

2. jsx안에서 js를 표현하는 방법

//{}로 wrapping하면 된다.

render () {
  let text = "hihi";
  return (
    <div> {text} </div>
  );
}

 

3. jsx안에서 style을 설정 할때는 string형식을 사용하지 않고 key가 camelCase인 객체가 사용된다.

render () {
   let text = "hihi";
   let styleVal = {
     backgroundColor:'aqua'
   }
   return (
     <div style={styleVal}> {text} </div>
   );
}

 

4. jsx안에서 주석을 작성 할때는 { /* ...  */} 형식으로 작성

 

5. Props
  -> 컴포넌트 내부의 immutable data를 처리할때 사용.
  -> jsx 내부에 {this.props.propsName}
  -> 컴포넌트를 사용할 때 <> 괄호안에 propsName="value"작성
  -> this.props.children은 기본적으로 갖고있는 props로써, 여기에 있는 값이 들어간다.
  -> Hello 다음 Codelab의 name이 나오고. children에 Codelab태그 사이에있는게출력

class Codelab extends React.Component {
 render () {
   return (
     <div> 
       <h1> Hello {this.props.name} {this.props.tmp} </h1>
       <div>
         {this.props.children}
       </div>
     </div>
   );
 }
);

class App extend React.Component {
 render () {
   return (
     <Codelab name={this.props.name} tmp="tmp attr">{this.props.children}</Codelab>
   );
 }
};
ReactDOM.render(<App name="name print">출력 children</App>, document.getElementById('root'));

 

6. 기본 값 설정

class App extend React.Component {
 render () {
   return (
     <div> {this.props.value} </div>
   );
 }
};

App.defaultProps = {
  value:0
};

 

7. Type 검증

class App extend React.Component {
 render () {
   return (
     <div> 
       {this.props.value} 
       {this.props.secondValue} 
       {this.props.thirdValue} 
     </div>
   );
 }
};

App.propTypes = {
 value:React.PropTypes.string,
 secondValue: React.PropType.number,
 thirdValue:React.PropTypes.any.isRequired
}

참고: https://facebook.github.io/react/docs/reusable-components.html

 

 

8. State
 -> 컴포넌트에서 유동적인 데이터를 사용할때 
 -> jsx 내부에 {this.state.stateName}
 -> 초기값 설정이 필수, constructor에서 this.state={} 으로 설정
 -> 값을 수정할 때는 this.setState({}), 렌더링이 된 다음엔 this.state= 는 사용하지 말아야함 
    -> 바뀐부분만 업데이트하는 부분을 무시하는 것. 성능에 악영향

class Counter extends React.Component {
  constructor(props) {
    //컨스트럭트를 사용해 초기화 해준다. super(props)를 통해 상속받은 React.Component의 메소드를 실행하고.
    //this.state를 통해 할 작업을 실행
    super(props):
    this.state={
      value:0
    }
  }
  render() {
    return (
      <div>  
        <h2> {this.state.value} </h2>
        <button>Press Me </button>
      </div>
    );
  }
}


class App extends React.Component {
  render() {
    return (
      <Counter />
    );
  }
};

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);

 

9. Component mapping

class ContactInfo extends React.Component {
  render() {
    return (
      <div>
        {this.props.contact.name}
        {this.props.contact.phone}
      </div>
    );
  }
};

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contactData: [
        {name:'Abet', phone:'010-1234-0000'},
        {name:'Beta', phone:'010-1234-2222'},
        {name:'Charlie', phone:'010-1234-3333'},
        {name:'David', phone:'010-1234-4444'}
      ]
    }
  }
  render() {
    
    const mapToComponent = (data) => {
      return data.map((contact, i) => {
        return (<ContactInfo contact={contact} key={i}/>);  
      });
    };
    return (
      <div>{mapToComponent(this.state.contactData)}</div>
    );
  }
};

class App extends React.Component {
  render() {
    return (
      <Contact/>
    );
  }
};

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);