[ React ] State 1️⃣

💎 State

📣 App.js

 

 import State1 from './components/R02_state1.js';

 import State2 from './components/R03_state2.js';

  function App() {

    return (

      <>

        <h1>Hello React!!</h1>

        <div>리액트 배운다~</div>

 

        <State1/>

        <State2 init={100}/>

      </>

    );

  }

  export default App;

 

 

📣 R02_state1.js

🩸 컴포넌트 시작이름은 항상 대문자!! 

🩸 리액트는 컴포넌트의 상태가 변할 때 마다 리렌더링을 수행함 

( 예전버전에서는 전체를 리렌더링했었는데 요즘 버전부터는 개선되서 바뀌는 그부분만 리렌더링된다 ) 

★★ const [ 변수, 함수(개발자가만든이름) ] = useState("초기값") == useState를 사용하는 고정구문 ★★

   

    import React, {useState} from 'react';

 

    const InputTest = () => {

       

        const [inputValue, setInputValue] = useState("초기값");

        //            변수          함수

        // inputValue : 값을 저장하는 변수

        // setInputValue : inputValue에 값을 대입하는 setter 역할의 함수

        const changInputValue = (e) =>{

            console.log(e.target.value);

            setInputValue(e.target.value);

        }

        return(

 

            <input type="text" value={inputValue}

            onChange={changInputValue}/>

            // onChange={(e) => {setInputValue(e.target.value)}} />

           

        );

    }

    export default InputTest;

 

📣 R02_state2.js

🩸 ↓ props = App.js에서 넘겨준 init={100}  props.init = 100;

 

    import React, {useState} from "react";

    const State2 = (props) => {

 

        const [count, setCount] = useState(props.init);

   

        return(

            <div>

                <h3>{count}</h3>

                <button onClick={()=>setCount(count+1)}>클릭하면 Count 1증가</button>

            </div>

        );

    }

    export default State2;