[REACT] 무작정 시작하기 (3) - props 와 state

2019/11/23 - [Font-end/React] - [REACT] 무작정 시작하기 (1) - 프로젝트 준비

2019/11/24 - [Font-end/React] - [REACT] 무작정 시작하기 (2) - Component

 

 

  지난 포스트에서 Counter Component를 만들어 보았다. 만들면서 간략하게 설명하고 넘어갔던 props와 state에 대해서 알아보도록 하겠다. React에서 변수를 사용하려면 반드시 알고 있어야하는 키워드이므로 잘 숙지하길 바란다.

 

 

1. props란?

   1-1. 부모로부터 상속받아서 사용하는 데이터로 값을 절대 변경할 수 없음.

   1-2. 최하위 자식 Component에서 최상위 Component의 Props를 사용하려면 계속해서 넘겨줘야하며 depth가 깊어질수록 복잡해짐.

 

 

2. state란?

   2-1. 변경이 가능한 변수, 단 setState()와 같은 setter함수가 필요함.

   2-2. state가 변경되면 Component가 다시 랜더링됨.

   2-3. Props를 State의 기본값으로 사용하여 가변적으로 사용할 수 있음.

 

 

3. 예제.

    3-1. 각 Depth별로 [ set ] 버튼을 클릭하면 state가 변경됨.

    3-2. 부모의 state가 변경되면 자식에게 props로 state를 넘겨주면서 최하위까지 전달됨.

import React, { useState } from 'react';
 
export default ()=>{
    const [ data, setData ] = useState( 100 );
    const [ num, setNum ] = useState( 1 );
    const handleClick = ()=>{
        setNum( num + 1 );
        setData( data + 1 ); 
    }
    return (
        <>
            <li>
                <a>Depth1 =>  state:{ num }, props:{ data }</a>
                <button onClick={ handleClick }>set</button>
            </li>
            <Depth2 data={ data * num } num={ num }/>
        </>
    );
}
const Depth2 = ( props )=>{
    const [ num, setNum ] = useState( props.num );
    const handleClick = ()=>{ setNum( num + 1 ); }
    return (
        <>
            <li>
                <a>Depth2 =>  state:{ num }, props:{ props.data }</a>
                <button onClick={ handleClick }>set</button>
            </li>
            <Depth3 data={ props.data * num } num={ num } />
        </>
    );
}
const Depth3 = ( props )=>{
    const [ num, setNum ] = useState( props.num );
    const handleClick = ()=>{ setNum( num + 1 ); }
    return (
        <>
            <li>
                <a>Depth3 =>  state:{ num }, props:{ props.data }</a>
                <button onClick={ handleClick }>set</button>
            </li>
            <Depth4 data={ props.data * num } num={ num } />
        </>
    );
}
const Depth4 = ( props )=>{
    const [ num, setNum ] = useState( props.num );
    const handleClick = ()=>{ setNum( num + 1 ); }
    return (
        <>
            <li>
                <a>Depth4 =>  state:{ num }, props:{ props.data }</a>
                <button onClick={ handleClick }>set</button>
            </li>
            <Depth5 data={ props.data * num } num={ num } />
        </>
    );
}
const Depth5 = ( props )=>{
    const [ num, setNum ] = useState( props.num );
    const handleClick = ()=>{ setNum( num + 1 ); }
    return (
        <>
            <li>
                <a>Depth5 =>  state:{ num }, props:{ props.data }</a>
                <button onClick={ handleClick }>set</button>
            </li>
            <Depth6 data={ props.data * num } num={ num } />
        </>
    );
}
const Depth6 = ( props )=>{
    const [ num, setNum ] = useState( props.num );
    const handleClick = ()=>{ setNum( num + 1 ); }
    return (
        <>
            <li>
                <a>Depth6 =>  state:{ num }, props:{ props.data } </a>
                <button onClick={ handleClick }>set</button>
            </li>
        </>
    );
}
 

 

 

이상으로 Props와 State에 대해서 알아보았다. 최대한 이해하기쉽게 설명해보려고 예제를 만들어봤는데 도움이 되었으면 좋겠다. 다음 시간에는 Props를 상속하여 사용하지않고 store에 저장하여 필요한 Component에서 꺼내서 쓰도록 해주는 Redux에 대해서 알아보도록 하겠다.