[ React ] State 2️⃣

🔔 State lifting up 상태 끌어올리기

: 상태 끌어올리기 React에서는 상위 컴포넌트가 하위 컴포넌트의 상태를 직접 변경할 수 없습니다. 따라서 React에서는 하위 컴포넌트에서 발생한 이벤트를 상위 컴포넌트에서 처리하도록 하는 상태 끌어올리기 패턴을 사용합니다.

💎 State 

- const Id = ({handler}) : 여기에서 props == handler 는 const StateLiftingUp 에서 보내준 함수이다

-> <Id handler={idHandler} 키값은 hander /  value 값은 상위 컴포넌트에서 만들어준 함수

                                                                           ↑ value = const idHandler = (e)=>{ // id값을 변경 함수
                                                                                                setId(e.target.value);
                                                                                           }

 

- const id 에서 input에 onChang이벤트를 적용해서 값을 입력하면 상위컴포넌트에서 보내준 함수가 실행되어

const [id, setId] = useState(""); 초기값이 "" 였던상태에서 입력을한 입력된값으로 바뀌고 그값은 id에 저장된다. 

** setID =  id 변수의 setter **

 

- <button disabled={id.length === 0 || pw.length === 0 }>Login</button>

쉽게 말해 자식 컴포넌트에서 입력된 input id,pw에 입력된값이 한개라도 없으면 button부분을 비활성화하고 둘다 입력되면 활성화시키는 조건

 

   

    import React, {useState} from "react";

    const Id = ({handler}) =>{

       

        return (

            <>

                <div className="wrapper">

                    <label htmlFor="id">ID : </label>

                    <input type="text" id="id" onChange={handler}/>

                </div>

            </>

        );

       

    };

    const Pw = ({handler}) =>{

        return (

            <>

                <div className="wrapper">

                    <label htmlFor="pw">PW : </label>

                    <input type="password" id="pw" onChange={handler} />

                </div>

            </>

        );

       

    };

 

    const StateLiftingUp = () =>{

           

        const [id, setId] = useState("");

        const [pw, setPw] = useState('');

        const idHandler = (e)=>{ // id값을 변경 함수

            setId(e.target.value);

        }

        const pwHandler = (e)=>{ // pw값을 변경 함수

            setPw(e.target.value);

        }

        console.log("id : " + id);

        return(

            <>  

            <Id handler={idHandler}/>

           

            <Pw handler={pwHandler}/>

            <div className='wrapper'>

                    <button disabled={id.length === 0 || pw.length === 0 }>Login</button>

            </div>

            </>

        );

    }

    export default StateLiftingUp;