StateLiftingUp

자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌드에서 처리하도록 하는 상태

원래는 부모 컴포넌트가 자식 컴포넌트의 상태를 직접 변경할 수 없다❌!
그러나 props와 useState의 성질를 이용해서 위와 같은 문제를 해결할 수 있다!

---

상태 끌어올리기를 해보기 전 알아야하는 개념 ```props```, ```state```, ```useState```

props

부모컴포넌트가 자식 컴포넌드에게 데이터 전달 시 사용하는 객체

**props 사용법**
	1. 자식 컴포넌트에 전달하려는 값(date) 속성을 정의한다.
    2. props를 사용해 정의된 값과 속성을 전달한다. 
    3. 전달받은 props를 렌더링 한다. 

State

컴포넌트의 상태를 나타내고 동적인 데이터를 다룰 때 사용한다.

userState

컴포넌트의 상태를 관리해줌
state의 변화가 감지되면 변화가 감지된 부분만❗컴포넌트 리렌더링를 한다

StateLiftingUp 예제

R04_state3.js

📍상태끌어올리기 : 부모컴포넌트의 "상태를 변경하는 함수"(useState사용) 그 자체를 자식 컴포넌트로 전달하고, 이함수를 하위 컴포넌트가 실행한다.

const [변수명, 값을 변경하는 함수(setter같은 역할)] = useState('초기값');

값을 변경하는 함수를 담을 변수를 생성해서 props로 보냄!
자식이 변경되면 부모도 변경되는 상태가된다.

import React,{useState} from "react";

const Id = ({handler}) => {

    // props로 전달한 값 중에서 key가 handler인 요소인 value 반환
    // console.log(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);
    console.log("pw : "+ pw);

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

            <div className='wrapper'>
                
                {/* disabled */}
                {/* id와 pw중 하나라도 입력되지 않을 경우  버튼 안 눌리게 하기*/}
                <button disabled={id.length === 0||pw.length === 0}>Login</button>
            </div>
        </>
    );
};

export default StateLiftingUp;