리액트에서 state를 사용하는 이유
리액트는 변수가 바뀌어도 무시하고 컴포넌트를 재실행, 렌더링 하지 않는다.
리액트가 값을 바꿀 수 있도록 재실행 하기 위해서 사용되는 것이 state라는 리액트 훅!
- hook: 리액트에서 제공하는 특별한 함수,
리액트에는 여러가지 훅이 있고 use로 시작한다
state 사용하기
먼저 파일 상단에
import React, {useState} from 'react';
라고 작성해 state란 라이브러리의 특정 요소를 사용할 것이라고 해두자.
그러면 값을 state로 정의 할 수 있도록 해주고, 값에 변화가 있으면 다시 호출을 한다!
그리고 컴포넌트 안에서 사용하면 된다. (다른 함수 안에서 중첩되어 사용은 X)
state는 구조분해할당의 형식으로 사용한다.
const [state, setState] = useState(initialValue)
- state: 컴포넌트 내의 변수
- setState(new state): state를 업데이트하는 함수
- initialValue: state의 초기값
ex
클릭할 때마다 숫자가 1씩 증가하는 버튼을 만들어보자
초기값을 0으로 설정하고, 버튼을 누르면 실행될 함수 handleClick를 작성해주었다.
현재값 count에 + 1 해준값을 setCount로 업데이트 해준다.
onClick 이벤트를 사용하여 리턴 될 값을 작성해준다.
<script>
function Counter(){
const [count, setCount] = useState(0); //초기값'0' 으로 설정
function handleClick(){
setCount(count+1); //현재값 count에 + 1 해준값을 setCount로 업데이트
}
//카운트 렌더링
return (
<>
<p>count: {count}</p>
<button onClick={handleClick}>+</button>
</>
)
}
</script>🔽 결과:
