React 함수

이전까지는 class로 화면표출및 동작을 보여줬는데 function을 사용하는 방법도 있다.

 

id와 password 텍스트박스가 있고 그 둘에 들어간 값이 "admin"인채로 로그인 버튼을 누르면

 

로그인 완료 텍스트가 뜨고 admin이 아니면 아무것도 안뜨게 하는 코드를 클래스로 먼저 만들면

 

        class App extends React.Component {

            state = {
                userid: '',
                userpw: '',
                isLogin: false
            }

            handleChange = e=>{
                this.setState({[e.target.name]:e.target.value})
            }

            handleSubmit = e=>{
                e.preventDefault()
                if(this.state.userid === "admin"&&this.state.userpw ==="admin"){
                    this.setState({isLogin:true})
                }else{
                    this.setState({isLogin:false})
                }
                this.setState({userid:'',userpw:''})
            }

            render() {
                return (
                    <>
                        <form onSubmit={this.handleSubmit}>
                            <input type="text" name="userid" onChange={this.handleChange} value={this.state.userid} />
                            <input type="password" name="userpw" onChange={this.handleChange} value={this.state.userpw} />
                            <button type="submit">로그인</button>
                        </form>
                        {this.state.isLogin ? '로그인이 완료되었습니다' : ''}
                    </>
                )
            }
        }

 

이런 코드가 나온다.

 

이걸 함수형으로 바꿔보면

 

        function App() {
            let [userid, setUserid] = React.useState("");
            let [userpw, setUserpw] = React.useState("");
            let [isLogin, setIsLogin] = React.useState(false);

            const handleChangeUserid = e => { setUserid(e.target.value) }
            const handleChangeUserpw = e => { setUserpw(e.target.value) }

            const handleSubmit = e => {
                e.preventDefault()
                if (userid === 'admin' && userpw === 'admin') {
                    setIsLogin(true)
                }else{
                    setIsLogin(false)
                }
                setUserid('')
                setUserpw('')
            }

            return (
                <>
                    <form onSubmit={handleSubmit}>
                        <input type="text" name="userid" onChange={handleChangeUserid} value={userid} />
                        <input type="password" name="userpw" onChange={handleChangeUserpw} value={userpw} />
                        <button type="submit">로그인</button>
                    </form>
                    {isLogin ? '로그인이 완료되었습니다' : ''}
                </>
            )
        }

 

같은 내용이지만 각각의 요소에 접근할때 객체로 접근하기보단 함수로 접근한다.

 

예를 들어 class 로 react를 사용할때 submit 이벤트에서 요소 값을 바꿀때 this.state.[요소명] 으로 접근한다.

 

            handleSubmit = e=>{
                e.preventDefault()
                if(this.state.userid === "admin"&&this.state.userpw ==="admin"){
                    this.setState({isLogin:true})
                }else{
                    this.setState({isLogin:false})
                }
                this.setState({userid:'',userpw:''})
            }

 

function으로 접근하게 되면

 

            let [userid, setUserid] = React.useState("");
            let [userpw, setUserpw] = React.useState("");
            let [isLogin, setIsLogin] = React.useState(false);

            const handleSubmit = e => {
                e.preventDefault()
                if (userid === 'admin' && userpw === 'admin') {
                    setIsLogin(true)
                }else{
                    setIsLogin(false)
                }
                setUserid('')
                setUserpw('')
            }

 

이렇게 함수로  접근해서 요소값을 변경한다.