[React] State, Props 이해하기

 React 에서 컴포넌트에서 데이터를 관리할때 사용 하는 개념으로 State와 Props 가 있습니다. 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 할때, Props를 사용합니다. 

컴포넌트에서의 변화에 대한 UI 업데이트 진행하려면, State를 사용합니다. 

아래의 예제를 따라하면 이해하기 수월합니다. 

 

1. Props

이전 포스팅에서 상속관계에 대해서 배웠습니다. (이전 포스팅 바로가기 : [React] 컴포넌트 상속(부모, 자식) 구현 방법)

parent.js에서 자식 컴포넌트를 호출 할 때, name과 age를 입력해 봅니다.

child.js에는 props로 <h2>태그에 표시되도록 작성해줍니다. 

parent.js

import ChildCom from './child';

 

function ParentComponent(){

    return (

        <div>

            <h1>부모</h1>

            <div>

                <ChildCom name = "큰아들" age = {10}/>

                <ChildCom name = "작은아들" age = {1}/>

            </div>

        </div>

    )

}

 

export default ParentComponent

child.js

function ChildComponent(props){

    const name = props.name;

    const age = props.age;

    return <h2>자식 : {name}, {age}</h2>

}

 

export default ChildComponent;

결과

자식에서 props를 사용하면, 부모에서 자식으로 데이터를 전달할 수 있습니다. 

 

2. State

컴포넌트의 업데이트를 위해서 사용합니다.

'state변수'와 'state를 변경시키는 함수' 이 두가지를 이용해서 컴포넌트를 재실행하게 됩니다. 

useState에서 'state를 변경시키는 함수'로 'state 변수'를 업데이트 하게 되면, 컴포넌트 소스를 재실행하면서 화면 업데이트를 진행하게 됩니다. 

 

useState 함수 : state값, state를 변경시키는 함수 를 반환합니다. (여기 함수로만 컴포넌트 재실행 가능)

const [ state변수, state를 변경시키는 함수] = React.useState(state초기값) 

아래 예제를 따라서 작성해보면 바로 이해할 수 있습니다. 

소스 코드

import React from 'react';

 

function PlusComponet(){

 

    console.log('Component 실행'); 

    // useState(0) 으로 선언하게되면, base 변수가 업데이트 될때마다 컴포넌트 재실행합니다. 

    const [base, Func] = React.useState(0) 

    function PlusFunc(){

        Func(base+1); //useState로 선언한 Functiom은 base 변수를 변경하기 위한 메서드입니다. 

  }

  return  (

        <div>

            <h3>{base}</h3>

            <button onClick={PlusFunc}>1+</button> 

    </div>

    )

}

 

export default PlusComponet;

결과

base가 변경 될때마다 'Component 실행' 로그가 작성되는 것을 확인할 수 있다. 

[base, Func] 에서 base는 변경될때 컴포넌트를 재실행할 변수를 선언합니다. 

Func는 base를 변경할 수 있도록 제공하는 메서드를 말합니다.

 

 

 

3. useState 내용이 헷갈리시는 분을 위한 테스트

useState에서 state 변수를 그냥 변경하면 어떻게될까? 궁금하실 수 있습니다. 

useState에서 사용하는 함수가 아닌 그냥 state 변수를 변경해 보겠습니다.

소스 코드

import React from "react";

function TimerComponet() {

    let [time, setTime] = React.useState(0); //0을 넣게 되면, time이 0으로 시작함

 

    //1. useState의 setTime 함수 사용

    function updateTime() {

        setTime(time + 1);

    }

 

    //2. 그냥 time 변수에 +1

    function updateTime2() {

        time += 1;

    }

 

    return (

        <div>

            <h3>{time}초</h3>

 

            {/* 1. useState의 setTime 함수 사용 */}

            <button onClick={updateTime}>

                [useState 함수 사용] 더하기 1 합니다.

            </button>

 

            {/* 2. 그냥 time 변수에 +1 */}

           <button onClick={updateTime2}>

                [그냥 time 변수 더함] 더하기 1 합니다.

            </button>

        </div>

    );

}

 

export default TimerComponet;

위의 컴포넌트를 새로 생성합니다. 

1. useState의 함수를 사용하는것

2. 그냥 time 변수를 변경하는 것

위 두가지 메서드를 버튼을 눌러서 호출해보겠습니다.