Today I Learned 1129

React : React Props

React Props

Props : React 컴포넌트에게 데이터를 전달하는 방법으로 단방향이다(부모 -> 자식 전달은 가능하지만
자식 -> 부모는 불가능)

예시

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

import React, { Component, useState } from 'react';

// 상태 내리꽂기(Props drilling)

function Exam3() {

    const[name, setName] = useState("이름1")
    // 리액트 컴포넌트의 state를 변경해야 할 때 
    // 무조건 setState를 통해 업데이트 => 불변성의 법칙
    return(

        <Mycomponent name = {name}/>  // => props 생성

    );
}

function Mycomponent(props) {
    return(
        <div>
            <p>자식</p>
            <p>이름 : {props.name}</p>
            <OtherComponent name = {props.name}/>
        </div>
    );
}

function OtherComponent(props) {
    return(
        <div>
            <p>자식의 자식</p>
            <p>이름 : {props.name}</p>
            
        </div>
    );
}


export default Exam3;

부모 컴포넌트에서 이름을 선언하고 자식 컴포넌트에서 해당 내용을 계속 상속받아서 사용하는 과정
이렇게 하면 프로젝트 규모가 커질 경우 불필요한 상속이 많아진다는 단점이 있다

state lifting up(상태 끌어올리기) : React에서는 하위 status 를 상위로 보낼 수 없음
=> 하위 컴포넌트의 이벤트를 상위 컴포넌트에서 처리하도록 실행

예시

import React, { useState } from 'react';

// 부모 컴포넌트
const Exam4 = () => {
    
    const [id, setId] = useState("");

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

    return (

        <>
            <Id onChangeId={onChangeId}/>
            <div>
                <button disabled={id.length === 0}>Login</button>
            </div>
        </>
    );
    
};

// 자식 컴포넌트 Id
const Id = ({onChangeId}) => {

    return(
        <div>
            <label htmlFor="id">ID: </label>
            <input id="id" onChange={onChangeId}/>
        </div>
    )
}

export default Exam4;

id 를 입력받고 id가 빈칸이 아닐 경우에 로그인 버튼을 활성화하는 코드이다. 만약 id에 해당하는 state가 자식 컴포넌트에 위치한다면 부모 컴포넌트에서 id 가 빈 칸인지 아닌지 알 수 없게 된다.
=> id에 해당하는 함수를 부모 컴포넌트로 들어올려서 부모 컴포넌트에서 id 값을 알 수 있게 해줌