React class & func

• React로 component를 만드는 방법은 class와 function을 사용하는 두가지 이다.
• 클래스 스타일은 모든 기능을 사용할 수있지만 복잡하다.
• 함수 스타일은 기능은 제한적이지만 단순하다. 하지만 최신 함수 스타일에는 hook 기능이 추가되면서 클래스 방식에 버금가는 component를 만들 수 있게 됬다.

• 기본 예제

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>hello world</h1>
      <FuncComp></FuncComp>
      <ClassComp></ClassComp>
    </div>
  );
}

function FuncComp(){
  return(
    <div className="container">
      <h2>Function Style Component</h2>
    </div>
  );
}

class ClassComp extends React.Component{
  render(){
    return(
      <div className="container">
        <h2>Class Style Component</h2>
      </div>
    );
  }
}

export default App;

props

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>hello world</h1>
      <ClassComp initNumber={2}></ClassComp>
      <FuncComp initNumber={2}></FuncComp> 
    //initNumber={2} 값을 각각 주었다 
    </div>
  );
}

Class style

class ClassComp extends React.Component{
  render(){
    return(
      <div className="container">
        <h2>Class Style Component</h2>
     	<p>Number: {this.props.initNumber}</p>
// 클래스 스타일에서는 props를 사용하여 받는다.
      </div>
    );
  }
}

Function Style

  function FuncComp(props){
  return(
    <div className="container">
      <h2>Function Style Component</h2>
      <p>Number: {props.initNumber}</p>
// 클래스 스타일과는 다르게 {this.props.initNumber}에서 this는 사라진다
//FuncComp 함수를 호출 할때 첫번째 파라미터 인자의 값으로 전달된 props값을 전달하도록 약속되어있다.
//함수의 인자값과 props이름은 아무거나 바꿔도 상관이 없다. 편의상 props를 많이 쓴다.
    </div>
  );
}

export default App; 

state

import React {useState} from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>hello world</h1>
      <ClassComp initNumber={2}></ClassComp>
      <FuncComp initNumber={2}></FuncComp> 
    </div>
  );
}

Class Style

class ClassComp extends React.Component{
  state = {
    number:this.props.initNumber
  }
//우선 초기값이 필요하다
//state 값을 number로 주었고 이때 props를 통한 initNumber값을 전해주면
//this.props.initNumber는 initNumber={2}에 의해서
//컴퍼넌트 안에 state 값이 2가 되게 된다.
  render(){
    return(
      <div className="container">
        <h2>Class Style Component</h2>
        <p>Number: {this.state.number}</p>
//state를 사용하기 위해 {this.state.number}로 변경해주면 이전과 똑같은 결과를 갔는다.
        <input type="button" value="random" onClick={
          function(){
            this.setState({number:Math.random()})
          }.bind(this)
        }>
        </input>
//state 값을 바꿀때마다 render메서드가 호출되고 
//새로 달라진 state의 number값이 시각적인 요소에 반영된다
      </div>
    );
  }
}

Function Style

  function FuncComp(props) {
   var numberState = useState(props.initNumber);
   var number = numberState[0];
    //class형에서 state의 초기값으로 initNumber 주었는데
    //함수형에서는 useState() 첫번째 인자로 값을 준다
    //useState에서 리턴한 numberState값을 보면 2가 나온다
    //만약에 인자값을 1로 주면 결과값이 1로 나온다
   var setNumber = numberState[1];
    //setNumber는 numberState의 두번째 값에 의해 함수가 담아지게 된다
   console.log('numberState', numberState);
  return (
    <div className="container">
      <h2>Function Style Component</h2>
      <p>Number: {number}</p>
      <input type="button" value="random" onClick={
        function () {
          setNumber(Math.random());
          //setNumber가 가르키는 함수의 인자로 원하는 새로운 값을 넣어주면 된다.
        }
      }>
      </input>
    </div>
  );
}

• useState() 사용시 배열이 리턴되고 배열안에는 두개의 값이 존재한다. 첫번째는 상태값 두번째는 상태를 바꾸는 함수이다
  
• state 사용시 두가지 방법이 있는데
  - react.useState를 작성하는방법
  - 상단에 import React, { useState } from 'react';를 작성하고 useState();를 사용하는 방법