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가지 방법
- setCounter 인자에 직접 원하는 값을 넣기 setCounter(count+ 1);
- 함수를 이용해서 현재 값을 계산해서 업데이트 setCounter((count) => count+ 1); => state값을 변경할 때 함수를 할당하여 세팅하는 게 안전하다.
'Web > React' 카테고리의 다른 글
[React] useEffect (0) | 2022.01.29 |
---|---|
[React] Component에 스타일 추가하기 (0) | 2022.01.29 |
[React] React 시작하기 (0) | 2022.01.29 |
[React] Props (0) | 2022.01.27 |
[React] Component (0) | 2022.01.27 |
댓글