[React] 숫자 증가감소 버튼만들기 Counter

최근에 코드대장간 유투브강의로 리액트 공부중

props, state, children, setstate, bind, 함수 등등을 총망라한!

Counter라는 숫자 증가감소 버튼을 만들어보자.

나는 추가로 리액트 UI라이브러리인 ant design를 활용해 UI를 이쁘게 꾸며줄예정!

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

class App extends React.Component {
    //state초기화
    constructor(props) {
        super(props);
        this.state = {
            value: 10
        }
        //bind의 의미 : 강제로 this는 여기다!
        this.onClickHandler = this.onClickHandler.bind(this);
        // onClickHandlerRemove.bind(this);는 아래처럼 arrow function을 사용하면 바인드 생략가능
    }
    onClickHandler(){
      // this.state.value++; 를 다짜고짜 하면 에러!
      // console.log(this); 왜냐하면 this가 undefined라서 bind필수
      //그럼이제 this.state.value++;가 잘나올까?
      // console.log(this.state);로보면 잘 증가하고있지만 갱신을하지못한다. 
      // -> state자체를 바꿔주는 setstate메소드사용
      this.setState({value:this.state.value+1});
    }
    onClickHandlerRemove=()=>{
      this.setState({value:this.state.value-1});
    }
    render() {
        return (
            <div className="App">
                <Display value={this.state.value}/>
                <div><button onClick={this.onClickHandler}>증가</button></div>
                <div><button onClick={this.onClickHandlerRemove}>감소</button></div>
            </div>
        );
    }
}

const Display = ({value}) => (
  <div>
      <h1>{value}</h1>
  </div>
)
export default App;

onClickHandler와 onClickHandlerRemove를 하나로 줄일수있는데 아래를 참고하면된다

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

class App extends React.Component {
    //state초기화
    constructor(props) {
        super(props);
        this.state = {
            value: 10
        }
    }
    onClickHandler=(plusMinus)=>{
      this.setState({value : this.state.value + plusMinus});
    }
    render() {
        return (
            <div className="App">
                <Display value={this.state.value}/>
                <div><button onClick={(plusMinus)=>this.onClickHandler(+1)}>증가</button></div>
                <div><button onClick={()=>this.onClickHandler(-1)}>감소</button></div>
            </div>
        );
    }
}

const Display = ({value}) => (
  <div>
      <h1>{value}</h1>
  </div>
)
export default App;

Children을 사용해 좀더 깔끔하게가보자. 일부러 증가버튼에만 Children을 적용해서 기존감소버튼과 비교할수있게하였다

import React from 'react';

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:0
        }
    }
    onClickHandler=(plusMinus)=>{
        this.setState({value:this.state.value+plusMinus})

    }
    render(){
        return(
            <div>
                <Display value={this.state.value}/>
                <Button mother={()=>this.onClickHandler(1)}>증가</Button>
                <div><button onClick={()=>this.onClickHandler(-1)}>감소</button></div>
            </div>
        );
    }
}
const Button = ({children,mother}) =>
<div>
    <button onClick={mother}>{children}</button>
</div>

const Display = (props) =>
<div>
    <h1>{props.value}</h1>
</div>

export default App;

 

 

일단 결과는 이렇게 나오고 증가감소버튼 작동이 잘되는것을 확인할수 있다 :)

이제 꾸며줄차례!

다음시간에는 업무때 접한 리액트 UI 라이브러리인 ant house를 써보려한다.

아래는 설치방법이나와있는 ant house 사이트이다.

https://ant.design/docs/react/introduce