React - state lifting up : 상태 끌어올리기 (자식 => 부모)

🤍 state lifting up

부모 컴포넌트는 자식 컴포넌트의 상태/값을 변경할 수 없다.
이벤트 (함수) 를 통해 처리 -> 상태 끌어올리기 패턴

const Id = ({handler}) => {

    // props로 전달한 값 중 key가 handler인 요소의 value 반환 

    // console.log(handler);
    // console.log(props.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='text' 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);
    }

   

    return(
        <>
            <Id handler={idHandler}/>
            <Pw handler={pwHandler}/>

            <div className='wrapper'>
                <button>Login</button>
            </div>
        </>
    );

}

export default StateLiftingUp;