[React] TIL 086 - 23.11.29

React : State 상태 & Props 속성

• Props 부모 -> 자식 (무조건 단방향!)

• App = 최상위 부모 컴포넌트
  ex) App (부모)
  state = {count : 0}
  -> Child 가 쓰고 싶다면 내리꽂아야 함

Exam3.js

부모(상태값=state) ------props------> 자식

import React from "react";

// 상태 내리꽂기(Props Drilling) : 부모가 가진 상태(state)를 자식에게 전달해서
//                                  자식이 사용할 수 있게끔 하는 것 

// 부모 컴포넌트
function Exam3() {
    return (
        <MyComponent />
    );
}


// 자식 컴포넌트
function MyComponent() {
    return (
        <div>
            <p>안녕</p>
            <p>나는 조미현이야</p>
        </div>
    );
}


export default Exam3; // 최종적으로 export 할 것 지정해주기만 하면 됨! (컴포넌트는 여러개 일 수 있다)

App.js

import logo from './logo.svg';
import './App.css';
import Exam1 from './component/Exam1';
import Exam2 from './component/Exam2';
import Exam3 from './component/Exam3';

function App() {
  return (
    <div className="App">
      {/* <h1>Hello World!</h1> */}
      {/* <Exam1 /> */}
      {/* <Exam2 /> */}
      {/* jsx 주석처리 : 주석 처리 하고 싶은 곳 커서두고 Ctrl + / = 쉽게 주석처리 가능! */}
      <Exam3 />
    </div>
  );
}

export default App;

Exam3.js

import React, { useState } from "react";

// 상태 내리꽂기(Props Drilling) : 부모가 가진 상태(state)를 자식에게 전달해서
//                                  자식이 사용할 수 있게끔 하는 것 

// 부모 컴포넌트
function Exam3() {
    // const [state(상태값 자체), set(상태를 세팅해줄 때 사용하는 함수)]
    const [name, setName] = useState("유재석");
    // 리액트 컴포넌트의 state 를 변경해야 할 때,
    // 무조건 setState를 통해서 업데이트 해주어야하며,
    // 업데이트 하는 과정에서 기존의 상태값을 직접적으로 수정하면 안됨
    // == 불변성의 법칙

    return (
        <MyComponent name={name} /> // props를 만든 것 name={"유재석"} -> Key:Value 형태
    );
}


// 자식 컴포넌트
function MyComponent(props) {
    return (
        <div>
            <p>안녕</p>
            <p>나는 {props.name}이야</p>
        </div>
    );
}


export default Exam3; // 최종적으로 export 할 것 지정해주기만 하면 됨! (컴포넌트는 여러개 일 수 있다)

-> props에 없는 속성을 넣어도 에러가 나지 않음(p태그 까지는 만들어지고 {props.age} 부분만 랜더링 되지 않음)

Exam3.js

import React, { useState } from "react";

// 상태 내리꽂기(Props Drilling) : 부모가 가진 상태(state)를 자식에게 전달해서
//                                  자식이 사용할 수 있게끔 하는 것 

// 부모 컴포넌트
function Exam3() {
    // const [state(상태값 자체), set(상태를 세팅해줄 때 사용하는 함수)]
    const [name, setName] = useState("유재석");
    // 리액트 컴포넌트의 state 를 변경해야 할 때,
    // 무조건 setState를 통해서 업데이트 해주어야하며,
    // 업데이트 하는 과정에서 기존의 상태값을 직접적으로 수정하면 안됨
    // == 불변성의 법칙

    return (
        <MyComponent name={name} /> // props를 만든 것 name={"유재석"} -> Key:Value 형태
    );
}


// 자식 컴포넌트
function MyComponent(props) {
    return (
        <div>
            <p>안녕</p>
            <p>나는 {props.name}이야</p>
            <p>{props.age}</p>
            <OtherComponent name={props.name}/>
        </div>
    );
}

// 자식의 자식 컴포넌트
function OtherComponent(props) {
    return (
        <div>{props.name}</div>
    )
}

export default Exam3; // 최종적으로 export 할 것 지정해주기만 하면 됨! (컴포넌트는 여러개 일 수 있다)

-> Context API == 하위 요소에게 바로 state 전달 가능!

• 부모가 자식이 가진 state를 직접 변경할 수 없다!

Exam4.js

단순히 감싸는 용도로만 사용한다면?
<></> 빈 태그 사용 가능!

import React, { useState } from "react";

// 상태 끌어올리기

// 부모컴포넌트
const Exam4 = () => {

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

    const onChangeId = (event) => {
        setId(event.target.value);
    }

    const onChangePw = (event) => {
        setId(event.target.value);
    }

    return (
        <>
            <Id onChangeId={onChangeId}/>
            <Pw onChangePw={onChangePw}/>
            <div>
                <button disabled={id.length === 0 || Pw.length === 0}>Login</button>
            </div>
        </>
    );

}

// 자식컴포넌트 Id
            // 속성 이름 값을 전달!
const Id = ({onChangeId}) => {
    
    return (
        <div>
            <label htmlFor="id">ID: </label>
            <input id="id" onChange={onChangeId} />
        </div>
    );
}


 const Pw = ({onChangePw}) => {
    return (
        <div>
            <label htmlFor="pw">Pw: </label>
            <input type="password" id="pw" onChange={onChangePw} />
        </div>
    )
 }

export default Exam4;

App.js

import logo from './logo.svg';
import './App.css';
import Exam1 from './component/Exam1';
import Exam2 from './component/Exam2';
import Exam3 from './component/Exam3';
import Exam4 from './component/Exam4';

function App() {
  return (
    <div className="App">
      {/* <h1>Hello World!</h1> */}
      {/* <Exam1 /> */}
      {/* <Exam2 /> */}
      {/* jsx 주석처리 : 주석 처리 하고 싶은 곳 커서두고 Ctrl + / = 쉽게 주석처리 가능! */}
      {/* <Exam3 /> */}
      <Exam4 />
    </div>
  );
}

export default App;

-> 아무것도 입력하지 않았을 때 : 로그인버튼 비활성화

-> 입력했을 때 : 로그인버튼 활성화

---