React , state의 프롭스의 전달 .

 

부모 state의 상태값을 하위 컴포넌트로 전달해보자.

과제 1.
숫자를 1증가시키는 버튼 , 숫자를 1 감소 시키는 버튼을 만들자.
나오는 값을  하위컴포넌트에서 판단하여 짝수인지 홀수인지 출력하자.

    const [number, setNumber] =useState(0);
    
    const onDecrease = ()=>{
        setNumber(number-1);
    };

    const onIncrease = ()=>{
        setNumber(number+1);
    };
   return (
        <div className='body'>
            <h3>** Props 와 State Test **</h3>
            <p>state 변수: {number} </p> 
            <p>Props 로 number 값을 Child 컴포넌트에 전달</p>
            {/* <Viewer01 number={10}  /> - 비교 테스트 용 */}
            <Viewer01 number={number} />
            
            <div>
                <button onClick={onDecrease}>Minus(-)</button>
                <button onClick={onIncrease}>Plus(+)</button>
            </div>
        </div>
    ); //return

-상위 컴포넌트의 구조

 

state 값을 출력 하고,<p>

하위컴포넌트가 있고,<Viewer01>

버튼이 있는 구조.<div>

하위컴포넌트로 state 값을 props형태로 전달한다.

 

function Viewer01({number}) {
    console.log('child view01');
    return(
        <div>
            <hr style={{borderColor : `blueviolet` ,width:`150px`}}/>
            <p>
                여기는 child view01 컴포넌트
            </p>
            {number}는 {number%2===0 ? <h3>짝수</h3> : <h3>홀수</h3>}
            <hr style={{borderColor : `blueviolet` ,width:`150px`}}/>
        </div>
    )
}

- 하위컴포넌트 구조

구분선을 주기 위해 , hr의 수평선이 있고 그내부에 컨텐트 들이 존재한다.

props의 속성값(number={number})과 받는 변수의 값(Viewer01({number}))이 같기 때문에 동일한 값을 이용한다.

즉 , 구조분해 할당을 통해 state의 값을 받아 사용한다.

짝수인지 홀수인지 삼항조건연산자를 통하여 값을 나타낸다.

 

-

 

 

상위 컴포넌트에서 함수도 props형태로 전달이 가능해 !

프롭스의 전달

 

props 는 상위컴포넌트에서 하위컴포넌트로 하단으로의 단방향으로만 진행이 된다.

하위에서 상위컴포넌트로 전달해야하는 경우가 발생할 수 있는데 ,

그럴때 어떻게 하는지 예제를 통해 살펴보도록 하자.

 

과제 2.
 - 숫자 더하기 빼기가 있는 버튼이벤트.
(1. 보여지는 용도의 컴포넌트( Viewer ) / 2. 버튼이 있는 컴포넌트( Controller ))
- 상위 컴포넌트에서 두개의 하위컴포넌트를 이용하여 컨트롤할것.
- 6개의 버튼을 통해 컨트롤 할것. ( -1, -10, -100, +100, +10, +1 )

 

  const [count, setCount]=useState(0);
  const onChangeCount = (e)=>{
    setCount(count+e);
  }
  return (
    <div>
      <h1>Simlpe Counter & </h1>
      <h1>함수 컴포넌트의 LifeCycle</h1>
      <section>
        <Viewer count={count} />
        <Controller setCount={onChangeCount} />
      </section>
    </div>
  );

 

상위의 컴포넌트에서 , 상태값을 관리하여 하위의 컴포넌트에 전달한다.

값을 전달하는 형식은 컴포넌트를 활용하면 된다는 것은 아주 쉽게 생각할 수 있지만,

하위의 버튼이벤트를 어떻게 상위 컴포넌트와 연결하지 ? 라는 생각을 할 수 있다.

 

그러면 상위 컴포넌트에서 하위컴포넌트로 함수를 던지면 되겠지 !

setCount 라는 임의의 속성(props.key) 를 지정하고 . 그에 대한 value 값을 함수의 객체참조형식(주소값)을 전달한다.

 

그러면 하위 컴포넌트에서 

function Controller ({setCount}){
    
    const onClickbtn = (e)=>{
        setCount(+e.target.innerText);
    }
    
    return(
        <>
        <button onClick={onClickbtn}>-100</button>
        <button onClick={onClickbtn}>-10</button>
        <button onClick={onClickbtn}>-1</button>
        <button onClick={onClickbtn}>+1</button>
        <button onClick={onClickbtn}>+10</button>
        <button onClick={onClickbtn}>+100</button>
        </>
    )
}

export default Controller;

매개변수로 구조분해 할당을 통해 받고 , 

클릭이벤트 함수에서 매개변수로 그값을 전달하는 형식을 취하면 된다 .

 

자세히 나눠본다면 .

function Controller ({setCount}){
    
    const onClickbtn = (e)=>{
        setCount(+e.target.innerText);
    }

setCount 의 변수에 onChangeCount 라는 함수의 객체를 참조받았다.

클릭이벤트를 발생할때, 이벤트 주체의 객체인 button의 텍스트를 받아

숫자로 형변환을 하여 setCount 의 매개변수에 담아 전달하였다.

 

부모의 컴포넌트에서

  const onChangeCount = (e)=>{
    setCount(count+e);
  }

매개변수를 받아 , count를 변경하는 함수를 실행시켰다.

 

innerText 또는 textContent를 통해 값을 받아올 수 있다.

 

즉 , 함수의 주소값을 프롭스의 형태로 전달하여 최종적으로 부모 컴포넌트에서 실행이 가능하도록 하였다.

---

또 다른방법으로는 ,

function Controller ({setCount}){

    return(
        <>
        <button onClick={()=>{setCount(-100)}}>-100</button>
        <button onClick={()=>{setCount(-10)}}>-10</button>
        <button onClick={()=>{setCount(-1)}}>-1</button>
        <button onClick={()=>{setCount(+1)}}>+1</button>
        <button onClick={()=>{setCount(+10)}}>+10</button>
        <button onClick={()=>{setCount(+100)}}>+100</button>
        </>
    )
}

export default Controller;

내부적으로 매개변수를 직접적으로 전송하여 사용 할 수도 있다.