[React] State

State

state는 데이터가 저장되는 곳으로 유동적인 데이터를 다루기 위한 객체이다.

component 내에서만 정의 가능하며 값의 변경이 가능하다.

 

---

 

 

데이터가 변경될 때 업데이트하는 방법

 

1. render() 함수를 이용해서 UI를 새로고침(리렌더링)

컴포넌트 내 값의 변경이 있을 때 새로고침이 필요한 곳에 render() 함수 사용.  -> 모든 코드가 재생성되는 단점이 있다.

ReactDOM.render(<Container/>,root);

 

 

2. useState() 함수 사용

React.useState() 함수를 통해 state를 사용한다.

함수형 컴포넌트에서 가변적인 상태 관리가 가능하다.

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

 

useState 함수는 배열을 반환하고 여기서 첫 번째 원소는 counter( 데이터를 담는 변수), 2번째 원소는 setCounter (데이터를 변경하는 함수)를 의미한다.

const [counter, setCounter] = React.useState(0)
const onClick =()=>{
            setCounter(999);
       }

 

counter는 값의 변경이 일어나는 변수이고 setCounter는 counter의 값을 999로 변경하는 함수이다.

아래 코드를 실행하면 버튼을 클릭 시 counter 값이 0에서 999로 변경된다.

 <script>
        const root=document.getElementById("root");
        let counter = 0;
        function App (){
            const [counter, setCounter] = React.useState(0)
            const onClick =()=>{
                setCounter(999);
            }
            return(
           <div>
                <h3>Total Clicks: {counter}</h3>
                <button onClick={onClick}>Click me</button>
            </div> 
        );
    }
        ReactDOM.render(<App/>,root);
</script>

 

 

setCounter 함수를 통해 state를 변경할 때  state값 변경이 있는 <h3> 컴포넌트만 재생성된다.

즉, state가 바뀌면 리렌더링이 일어난다. => 전체 코드를 재생성하지 않고 바뀐 부분만 업데이트된다.

 

 

 

+ 추가

count값이 1씩 증가하도록 state를 바꾸는 2가지 방법

1. setCounter 인자에 직접 원하는 값을 넣기 setCounter(count+ 1);
2. 함수를 이용해서 현재 값을 계산해서 업데이트 setCounter((count) => count+ 1); => state값을 변경할 때 함수를 할당하여 세팅하는 게 안전하다.