[React] 기초 개념

react

React

CodePen.io 사용

  • JavaScript Preprocessor에 Babel 선택
    • ES6문법을 그 이전 문법으로 바꾸어줌
    • 구 버전 웹사이트에 적용시키기 위해
  • Quick-add 에서 React, React-Dom 선택
    • React는 Component 담당
    • React-Dom은 렌더링 부분 담당

Componet

  • 자바스크립트 class를 말한다
  • ReactComponent 라는 클래스를 상속
  • 모든 컴포넌트에는 render()메소드가 있다.

Render

  • component가 어떻게 생길지 결정한다.
  • JSX
    • javascript에서 html형태로 작성할 수 있다.
    • 꼭 container element안에 포함 시켜야 한다. 
        /* 에러 발생 코드 */
  render(){
  return(
      <h1>HI</hi>
      <h2>I am Error</h2>
  );
  }
  /* 컴포넌트에서 여러 Element를 렌더링 할 때 꼭 conainer element안에 포함시켜야 한다 */
  render(){
  return(
      <div>
          <h1>HI</hi>
          <h2>I am Error</h2>
      </div>
  );
  }
    • JavaScript 변수를 보여주고 싶을 때는 {}로 wrapping한다. 
        render(){
  let text = "Hello React!";
  return(
      <div>{text}</div>
  );
  }
    • 변수 선언시에는 let 사용
    • style 설정시 string 형식을 사용하지 않고 key가 camelCase인 객체를 사용 해야한다. 
        render(){
  let style={
      color:'aqua',
      backgroundColor : 'black',
  }
  return(
      <div style={style}>React Codelab</div>
  );
  }
    • 주석은 {/* ~~ */}의 형태여야 한다.
    • 주석은 container element(return)안에 작성되어야한다.

ReactoDOM

  • 실제 페이지에 JSX코드를 렌더링 할 때 사용된다
  • 첫번째 인수는 렌더링 할 컴포넌트, 두번째 인수는 이 컴포넌트를 렌더링 할 element(id)

Props

  • 컴포넌트 내부의 Immutable Data
    • 변하지않는 데이터를 사용할 때
  • JSX 내부에 {this.props.propsName}
  • 컴포넌트를 사용할 때, <> 괄호 안에 propsName ="value"
  • this.props.children은 기본적으로 갖고있는 props로서, <Cpnt>여기에 있는 값이 들어간다.</Cpnt>

props의 기본값 설정하기

  • 컴포넌트 선언이 끝난후 Component.defaultProps= {...}객체를 설정한다.
class App extends React.Component{
    render(){
        return(
            <div>{this.props.value}</div>
        );
    }
}
App.defaultProps={
    value:0,
};
  • Type 검증
    • 특정 props 값이 특정 타입이 아니거나 필수 props인데 입력을 안한 경우 확인가능
    • Component.propTypes={...}
class App extends React.Component{
    render(){
        return(
            <div>
                {this.props.value}
                {this.props.secondValue}
                {this.props.thirdValue}
            </div>
        );
    }
}
App.propTypes={
    value : React.PropTypes.string,
    seoncdValue : React.PropTypes.number,
    thirdValue : React.PropTypes.any.isRequried,
}

State

  • 유동적인 데이터
  • JSX 내부에 {this.state.stateName}
  • 초기값 설정이 필수, 생성자(constructor)에서 this.state={}으로 설정
  • 값을 수정할 때에는 this.setState({...})을 사용하여 컴포넌트 내에서 값 수정
  • 렌더링 된 다음엔 this.state= 절대 사용하지 말것, 즉 생성자에서 사용하지 못함
class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state ={
    value:0,  
    }
    // 바인딩을 꼭 해줘야 this가 여기 클래스에서 사용하는 this인지 안다
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(){
    this.setState({

      value: this.state.value+1
    })
    /* 이렇게 하지말기!
    this.state.value = this.state.vlaue+1;
    this.forceUpdate();
    */
  }
  
  render(){
    return(
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleClick}>Press Me</button>
      </div>
    )
  }
}

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

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

Component Mapping

  • 비슷한 코드를 반복해서 업데이트 하는 방법

Map

  • 데이터 렌더링 할 때 사용하는 자바스크립트 함수
  • map()메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성한다.
  • arr.map(callback,[thisArg])
  • callback : 새로운 배열의 요소를 생성하는 함수로서, 다음 세가지 인수를 가진다
    • currentValue : 현재 처리되고 있는 요소
    • index : 현재 처리되고 있는 요소의 index값
    • array : 메소드가 불려진 배열
  • thisArg(선택항목) : callback함수 내부에서 사용 할 this 값을 설정