리액트에서 state사용하기

리액트에서는 현재의 상태값을 저장할수 있는 state라는것을 사용한다. 해당 컴포넌트에서 표현하고 싶은 데이타를 state에 저장을 하면 해당 컴포넌트가 rerendering되면서 변경된 state값을 표현할수 있게된다.

 

그럼 예제를 한번 보자. 한번쯤 봤을법한 count예제이다. 여기서는 useState를 써서 state값을 처리한다.

더하기 버튼을 클릭하면 카운트가 1씩 증가하게 한다.

 

먼저 카운트 표시하는 div를 만들고, 그리고 count버튼을 다음과 같이 만들자

function Counter({count,onIncrementClick}) {
    return <button onClick={onIncrementClick}>{count}</button>
}

function CounterDisplay({count}) {
    return <div>The current counter count is {count}</div>
}

export {
    Counter,
    CounterDisplay
}

 

그런다음 useState를 사용해서 초기 count값을 보여주고, count버튼을 클릭하면서 count값이 변경시키는 함수를 작성한다. 

useState(initialValue)는 state변수, state변수를 변경할수 있는 함수 이 두가지를 반환합니다. 그리고 인자로 초기화값을 받습니다.

 

아래의 코드를보면 usetSate(0)은 count값을 0으로 셋팅하고, count값을 변경할수 있는 setCount값을 반환받습니다.

반환받은 setCount를 사용하여 count값을 변경을 합니다. 

function App(){
	const [count, setCount] = useState(0);
	const increment = () => setCount( c => c +1);
	
    return(
    	<CounterDisplay count={count} />
        <Counter count={count} onIncrementClick={increment}/>
    )
}

 

모두 작성한 다음 count버튼을 클릭해보자. 카운트가 변하는것을 볼수가 있다.

 

참조: ko.reactjs.org/docs/hooks-state.html

Using the State Hook – React