PropTypes, state

import { useState } from "react";

const Say = () =>{
    const [mess,setM] =useState('');
    const onClickEnter = () => setM('안녕하세요');
    const onClickLeave = () => setM('꺼져');

    const [color, setColor] = useState('black');

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{color}}>{mess}</h1>

            <button style={{color:'red'}} onClick={()=> setColor('red')}>빨강</button>
            <button style={{color:'green'}} onClick={()=> setColor('green')}>초록</button>
            <button style={{color:'blue'}} onClick={()=> setColor('blue')}>파랑</button>
        </div>
    );
};

export default Say;​

class Counter extends Component{

    constructor(props){
        super(props);

        this.state ={
            number: 0,
            Fnumber: 0
        };
    }

    render(){
        const {number, Fnumber} =this. state;
        return(
            <div>
            <h1> {number}</h1>
            <h2> {Fnumber}</h2>
            <button
                onClick={()=> {
                  this.setState(prevState => {
                      return{
                        number: prevState.number +1
                      };
                  });

                    this.setState(prevState => ({
                        number: prevState.number +1
                    }));
                }}
            >
                +1AND+2
            </button>
            </div>
        );
    }
}

PropTypes.String

-> name값은 문자열만 됨

 

그 외에 

import PropTypes from 'prop-types'

const MyComponent = ({name, children,FunNum}) =>{

    return (
        <div>안녕하세요 제 이름은 {name}입니다
        안에 들어간 내용은 {children}입니다
        숫자는 {FunNum}입니다
        </div>
    );
    
};

MyComponent.defaultProps ={
    name:"기본이름"
}

MyComponent.prototype = {
    name: PropTypes.string,
    FunNum: PropTypes.number.isRequired
}

export default MyComponent;

import MyComponent from './MyComponent'; 

const App = () =>{
  return <MyComponent FunNum={3}>리액트</MyComponent>
}

export default App;

컴포넌트형

class MyComponent extends Component{
    render(){
        const { name, FunNum, children} =this. props;
        return(
            <div>안녕하세요 제 이름은 {name}입니다
            안에 들어간 내용은 {children}입니다
            숫자는 {FunNum}입니다
            </div>
        );
    }
}

클래스형1

class MyComponent extends Component{

    static defaultProps= {
        name:"기본이름"
    };

    static prototypes= {
        name: PropTypes.string,
        FunNum: PropTypes.number.isRequired
    };

    render(){
        const { name, FunNum, children} =this. props;
        return(
            <div>안녕하세요 제 이름은 {name}입니다
            안에 들어간 내용은 {children}입니다
            숫자는 {FunNum}입니다
            </div>
        );
    }
}

클래스형2

class Counter extends Component{

    constructor(props){
        super(props);

        this.state ={
            number: 0
        };
    }

    render(){
        const {number} =this. state;
        return(
            <div>
            <h1> {number}</h1>
            <button
                onClick={()=> {
                    this.setState({number: number +1});
                }}
            >
                +1
            </button>
            </div>
        );
    }
}

클릭시 숫자 증가

constructor 함수 호출시 super(props)를 호출해야 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 component클래스가 지닌 생성함수를 호출한다.

 

this.setState(prevState => {
     return{
      number: prevState.number +1
     }
 });

prevState

-> 데이터 새로 갱신

 

class Counter extends Component{

    constructor(props){
        super(props);

        this.state ={
            number: 0,
            Fnumber: 0
        };
    }

    render(){
        const {number, Fnumber} =this. state;
        return(
            <div>
            <h1> {number}</h1>
            <h2> {Fnumber}</h2>
            <button
                onClick={()=> {
                  this.setState(
                      {
                          number: number+1,
                          Fnumber: Fnumber+2
                      },
                      ()=> {
                          console.log('호출됨');
                          console.log(this.state);
                      }
                  )

                }}
            >
                +1AND+2
            </button>
            </div>
        );
    }
}

console에 값 호출

import { useState } from "react";

const Say = () =>{
    const [mess,setM] =useState('');
    const onClickEnter = () => setM('안녕하세요');
    const onClickLeave = () => setM('꺼져');

    const [color, setColor] = useState('black');

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{color}}>{mess}</h1>

            <button style={{color:'red'}} onClick={()=> setColor('red')}>빨강</button>
            <button style={{color:'green'}} onClick={()=> setColor('green')}>초록</button>
            <button style={{color:'blue'}} onClick={()=> setColor('blue')}>파랑</button>
        </div>
    );
};

export default Say;

이벤트 발생시 style이 바뀌거나 글이 바뀜 useState 사용