[78일차] 20210702 React 리액트 함수형 컴포넌트

어제까지 배운 내용 : Class Component 

 

예제로 Class형 vs 함수형 비교해보기 ! 

 

예제 1

1) Class Component

        class App extends React.Component{
            render(){
                return(
                    <p>금요일이다 ! </p>
                )
            }
        }


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

 

2) Function 함수형 Component 

        function App(){
            return(
                <p>
                    금요일이다 !!!! 
                </p>
            )
        }


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

함수형 장점 : React.Component 를 안써도 되서 오류가 적어질 수 있다. 

함수형은 간결하지만 render라던지 눈에 보이는 표시(?) 가 없어서 리액트가 어떻게 작동되는지 알려면 Class를 먼저 배우는게 좋음 ! 

함수 return 이 render / 함수 자체가 render라고 생각하면 됨 ! 

 

함수 안에 여러가지 넣는걸 제한하고 있음. 

hook이라는 게 있기 전에 함수형이 속도 느리고, 비효율적이다라고 생각했는데 초기 rendering은 함수형이 10% 내외로 쪼금 더 빨랐다고 함 -> 성능의 차이는 둘 다 상관없다 

 

 

  예제 2   함수형의 상태값 state 만들기 

 

1) 클래스로 먼저 만들어 보기 

        class App extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    text:'금욜이닷', 
                    text2:'상태값 두번 째닷'
                }
            }
            render(){
                return(
                    <>
                        <p>{this.state.text}</p>
                        <p>{this.state.text2}</p>
                    </>
                )
            }
        }

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

상태값을 하나씩 추가를 해주었고 출력하고 상태 중 특정 값만 추가할 수 있었음 ! 

 

 

 

2) 함수형

        function App() {
            let [text, setText] = React.useState('굳모닝')
            let [text2, setText2] = React.useState('빠빠빠빠빰')
            let [text3, setText3] = React.useState('빠바바ㅃ밤 굳모닝')
            
            const handleClick = e =>{
                text  // this.state.text 이렇게 안써도 됨 ! 
            }

            return (
                <>
                    <p>{text}</p>
                    <p>{text2}</p>
                    <p>{text3}</p>
                </>
            )
        }

단점 : 함수형의 상태값 설정은 좀 길다. 클래스에서 상태값 추가할 때는 편리했는데 함수형은 변수가 그만큼 추가되는 귀찮음이 있다. 

 

장점 : this.state 를 없이 그냥 변수 명 쓰기 편함 ! 

 

            let [text, setText] = React.useState('굳모닝')

text 변수 명 / setText 상태를 변경해줄 함수가 return됨 

 

 

 

 

클래스 컴포넌트

onClick과 같은 함수로 state 안의 다른 것들도 함께 바꿀 수 있었음 

위 코드를 함수형으로 만들어 보기

 

 

함수형 설정값 변경 , setState 방법 

- 비구조할당문에서 가져온 setText 함수를 사용해서 내용 변경 

- 함수만들 때 꼭 const 와 같은 선언자 let / var / const 사용해야함 ! 

- 'this' 없다 ! 

- Class의 장점 : 상속 - 데이터 전달받기 쉬웠음 

- 함수 -> React.useState 함수로 커버 + 코드양이 줄었다  

        function App() {
            let [text, setText] = React.useState('굳모닝')
            let [text2, setText2] = React.useState('빠빠빠빠빰')
            let [text3, setText3] = React.useState('빠바바ㅃ밤 굳모닝')
            
            const handleClick = e =>{
                setText('바꿈')
                setText2('바꿈')
                setText3('바꿈')
            }

            return (
                <>
                    <p onClick={handleClick}>{text}</p>
                    <p>{text2}</p>
                    <p>{text3}</p>
                </>
            )
        }

클릭하면 바뀐다

 

React.useState('ㅁㄴㅇㄹ') 이 매서드는 변수(의 값)와 (변수의 값을 변경할 수 있는)함수를 생성해주는 것 

첫 번째 인자값 : 최초에 넣을 값 -> 'ㅁㄴㅇㄹ'

 

 

 

 

배열 만들어보기 (댓글 기능 시) 

        function App() {
            let [text, setText] = React.useState('굳모닝')
            let [text2, setText2] = React.useState('빠빠빠빠빰')
            let [text3, setText3] = React.useState('빠바바ㅃ밤 굳모닝')
            let [list, setList] = React.useState([1,2,3,4,5])  // [1,2,3] = 디폴트 값 
            
            const handleClick = e =>{
                setText('바꿈')
                setText2('바꿈')
                setText3('바꿈')
            }

            return (
                <>
                    <p onClick={handleClick}>{text}</p>
                    <p>{text2}</p>
                    <p>{text3}</p>
                    <p>{list}</p>
                    <p>{list.map(v=>v)}</p>
                    <p>{list.map(v=>v+1)}</p>
                   
                </>
            )
        }

배열의 return 값이 STRING 

-> 나중에 배열로 무언가 할 때 이 점 유의해서 ! 

 

 

 

함수형 컴포넌트로 트렌드 이동이는 이유 : hooks 의 도움이 컸다 ! 

useState() 가 hooks 기능 중 하나 

클래스로 기초를 잘 ~ 다지고 함수로 넘어가기 ** 

 

 

 

 

 

---

 

 

 

함수 컴포넌트로 event 해보기 

 

1. 기본 틀 작성 

 

App == inputbox 2개 + button + form 

id/ pw 가 admin 일 때 텍스트를 아래에 띄우기 

        function App(){

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


            return(
                <>
                    <form>
                        <input type="text" name="userid" value={userid}/>
                        <input type="text" name="userpw" value={userpw}/>
                        <button type="submit" >로그인</button>
                    </form>
                </>
            )
        }


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

 

2. 함수 적용 

    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="text" name="userpw" onChange ={handleChangeUserpw} value={userpw}/>
                        <button type="submit" >로그인</button>
                    </form>
                    {isLogin ? '로그인 되었습니다' : ''}
                </>
            )
        }



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

 

---

 

 

 

 

위의 함수 코드를 class component 로 바꾸기 

        class App extends React.Component {
            state = {
                userid: '',
                userpw: '',
                isLogin: false
            }

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

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

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

        }

 

 

 

 

---

 

 

 

 

<body>

    <div id="root"></div>
    <script type="text/babel">

        function App(){
            let [isLogin, setIsLogin] = React.useState(false)

            let L = isLogin ? '로그아웃' : '로그인'
            const handleClick = ()=>{
                setIsLogin(!isLogin)
            }

            return(
                <>
                    <p>{isLogin ? '환영합니닭' : '로그인을 진행해주세요'}</p>
                    <button onClick={handleClick} >{L}</button>
                </>
            )

        }

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

    </script>
</body>