[React] state 사용하기

위와 같이 아주 심플한 페이지가  이씁니당

add animal 버튼을 클릭하면 아래 숫자가 1씩 업데이트되어 렌더링하도록 할 거예염

 

 

 

그럼 우리가 이때 일반 javascript라면 그냥 변수를 선언하고 값을 업데이트하면 되겠지만

ㄴㄴ 여기서는 그렇지가 않습니다

 

jsx에서는 state라는걸 사용해야하는거져

빨간 박스처럼 state가 component를 다시 렌더링해서 화면에 보이는 데이터를 업데이트 해준다고 합니다

 

 

state를 사용하려면 state를 import 해야겠죠?

	import { useState } from "react";

App.js 상단에 위 코드를 import 해줍니다

 

 

 

 

state 사용하는 방법은 

const [변수명, setter함수] = useState(초기값) 입니당

 

 setter함수가 변수값을 유일하게 변경할 수 있는 방법임여

 

 

App.js를 볼게욤

    import { useState } from "react";
    function App(){
        const[count,setcount] = useState(0);
        const num = 0; 
        const handleClick = () =>{
            setcount(count+1);
        }
        return (
            <div>
                <button onClick={handleClick}>Add animal</button>
                <div>
                    Number of animals : {count}
                </div>
            </div>
        );
    }
    export default App;

버튼을 클릭하잖아여?

그럼 App()이 렌더링되는데여

최초 호출시에는 line 3에 있는 useState(0)가 호출되어 count에 초기값을 0으로 할당해줍니당

그리고 count 값은 0이었는데 버튼의 클릭이벤트로 값이 1로 변합니다

 

그런다음에 또 버튼을 클릭하면?

그럼 count는 이전에 setCount로 업데이트 된 1을 가지고 있고 useState(0)은 호출되지 않습니다

그렇게 값을 저장하고 업데이트 하는것이 jsx라네여

 

 

이것저것 궁금한게 많지만

쓰앵님이 이 단계에서는 너무 깊이 알지 않아도 된다고 선을 그으셔서

선생님 따라 가기로 함

 

끝.