[220414] 리액트에서 이벤트 생성하기

1.   이벤트명은 Camel 형태로 쓰기

html에서 이벤트를 만들때

 <button id="asdf" onclick="alert('버튼클릭함')">버튼</button>

 

리액트에서 이벤트를 만들때는 지정되어있는 함수를 쓸때는 Camel 형태로 사용해야한다.

Camel형태로 안 쓰면 실행 자체가 안 된다.

class Login extends React.Component{
    state = {
        name:'ingoo2'
    }

    render(){
        return(
            <button onClick={alert('방금클릭함')} >{this.state.name}</button>
        )
    }
}

 

 

 

2.   이벤트는 익명함수로 감싸기

render() 자체가 내 안에 있는 코드는 모두 실행할게!!라는 함수다.

따라서 onClick함수가 바로 실행되기때문에, 사이트가 렌더되자마자 클릭하기도 전에 알람창이 뜨게된다.

버튼할때 클릭을 하려면 익명함수로 감싸게 되면 된다.

왜?  함수가 호출되지 않으면 실행이 될 수 없기 때문!

return(
    <button onClick={ ()=> {alert('방금클릭함')} }> {this.state.name} </button>
)

 

 

 

3.   이벤트로 setState() 사용하기

state 객체에 대한 변화를 주는 setState()를 이벤트에 넣어서 사용할 수 있다.

class Login extends React.Component{
    state = {
        name:'ingoo2'//이벤트 전 값
    }

    render(){
        const obj = {
            ...this.state,
            name:'ingoo' //이벤트 후 바꿀값
        }
        return(
            <button onClick={ ()=> { this.setState(obj)} }>
            	{this.state.name}
            </button>
            //클릭 전엔 ingoo2, 클릭 후엔 ingoo로 바뀌는 버튼
        )
    }
}

 

 

 

4.   if는 안되지만 삼항연산자는 된다!

중괄호 안에는 자바스크립트가 작성 가능하다고했지만 if문은 안됨. (그냥 babel이 안됨. 그냥 안됨)

대신, 삼항연산자는 된다.

이것을 이용해서 클릭할때마다 로그인/로그아웃으로 바뀌는 버튼을 만들어보자.

난 왜 한번밖에 안 바뀌지 왜지

class Login extends React.Component{
    state = {
       isLogin : false
    }

    render(){
        const obj = {
            ...this.state,
            isLogin:!this.state.isLiogin
        }
        return(
            <button onClick={ ()=> { this.setState(obj)} }>
                {this.state.isLogin ? '로그아웃' : '로그인'}
            </button>
        )
    }
}

class App extends React.Component{
    render(){
        return(
            <div>
                <Login />
            </div>
        )
    }
}

 

 

 

5.   이벤트를 이용한 증가, 감소 버튼 만들기

<div id="root"></div>
<script type="text/babel">
    class Counter extends React.Component{
        //현재상태
        state = {
            number:0
        }

        incre = (index) => {
            const increase = {
                ...this.state,
                number:this.state.number + index
            }
            this.setState(increase)
        }
        decre = () =>{
            const decrease = {
                ...this.state,
                number:this.state.number - index
            }

            this.setState(decrease)
        }

        render(){

            return(
                <div>
                    <h3>{this.state.number}</h3>
                    <button onClick={()=>{this.incre(index)}}>+</button>
                    <button onClick={()=>{this.decre(index)}}>-</button>
                </div>
            )
        }
    }

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

    ReactDOM.render(
        <App />
        ,document.querySelector('#root')
    )
</script>

 

 

 

6.   react developer tools로 출력값 확인하기

https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html#installation

리액트 홈페이지에 가면 크롬에 설치할 수 있는 추가기능을 제공한다.

기능을 깔면 크롬 개발자도구에서 component 탭 볼 수 있게 된다.

리액트만의 기능인 props를 확인할 수 있다.

value를 확인할 수 있는 props

함수를 확인할 수 있는 props

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

<script type="text/babel">
    class Form extends React.Component{
        state ={
            value:'',
        }

        handleChange = e => {
            // console.log(e.target.value) //input박스에 있는 value
            const {state} = this
            const {target:{value}} = e

            this.setState({
                ...state,
                value
            })
        }

        handleSubmit = e => {
            e.preventDefault()
        }

        render(){
            const {
                state:{
                    value
                },
                handleChange,
                handleSubmit
            } = this

            return(
                <form onSubmit={handleSubmit}>
                    내용 : <input type="text" value={value} onChange={handleChange} />
                    <input type="submit" value="확인" />
                    <h3>{value}</h3>
                    <h4>{this.props.init}</h4>
                </form>
            )
        }
    }

    class App extends React.Component{
        render(){
            return(
                <div>
                    <Form init={"asdf"}/>
                </div>
            )
        }
    }

    ReactDOM.render(
        <App />
        ,document.querySelector('#root')
    )
</script>