[ React ] State lifting up 속성 알아보기 ④

🤔💬 props - 금수저 부모

- 부모가 자식한테 값을 준다 ! 

쉽게 생각하고 싶어 '금수저부모'라고 생각하기로 했다.

 

 

🤔💬 state lifting up - 자수성가

❗ 자식이 부모한테 값을 전달 할 수 있도록 하는 것이다 !

  (자식 값이 변함으로서 부모가 값이 바뀐다!)

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

prop와 다르게 자식이 부모한테 값을 주니 ! '자수성가' 라고 생각하기로 했다.

 

📘 APP.js

1. 서버 연결을 위해 APP.js에 import 해주고, import 해줄때 별칭을 넣어준다. 

/* import logo from './logo.svg'; */
import './App.css';


import State3 from './components/R04_state3';


/* index.js에서 App을 부르고 있어! */
function App() {

  // 리액트의 컴포넌트는 딱 ! 하나의 요소만을 반환할 수 있다.
  // -> 여러 요소를 반환하고 싶다면 부모 요소로 묶어준다! 

  return (
    /* fragment(<></>) : 반환 요소를 감쌀 때 사용, 해석 X */
    <>
      <State3 />
    </>
  );
}

export default App;

 

📚 VS code

📘 R04_state3.js

import React, { useEffect, 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}></input>
            </div>
        </>

    );
};

// 상태 끌어올리기 
const StateLiftingUp = () => {

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

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

        /* 아이디 값 변경 함수 */
        setId(e.target.value);

    }

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

        /* 비밀번호 값 변경 함수 */
        setPw(e.target.value);

    }

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


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

            <div className="wrapper">
                <button disabled={id.length === 0 || pw.length === 0}>Login</button>
            </div>

        </>
    );


}

export default StateLiftingUp;

💻 코드 간단 리뷰

1. return에 ID / PW에 대한 함수를 만들어준다 ! 해당 함수는 handler로 이름을 작성한다!
   부모가 자식한테 값(돈)을 주는게 아니라 함수만 준다! = 자식만 낳아준거라고 생각해보자!
   
2. 부모가 준 handler을 이용해서 형태를 만들고 해당 값을 만들어서 부모한테 준다! 
    즉 부모는 낳아줬는데 자식 모든 형태를 만들고 값도 만들어서 부모한테 줬다!