반응형
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
State(상태)
State는 계속해서 변화하는 특정 상태이다. 상태에 따라 각각 다른 동작을 한다. 쉽게 예를 들면 웹에서 자주 사용하는 다크 모드(Dark Mode) 테마를 껐다가, 켰다가 하는 게 상태의 하나이다.
즉 react에서 State(상태)란 계속적으로 값이 변화하는, 동적인 데이터를 갖는 컴포넌트이다.
실습을 위해 Counter.js를 만들어보자. Counter.js는 숫자가 있고 + 버튼을 누르면 숫자를 1씩 증가시키고, - 버튼을 누르면 숫자를 1씩 감소시키는 페이지이다.
const Counter = () =>{
return (
<div>
<h2>0</h2>
<button>+</button>
<button>-</button>
</div>
)
};
export default Counter;
App.js 파일에 Counter 컴포넌트를 추가하자.
//import './App.css';
import MyHeader from './MyHeader';
import React from 'react';
import Counter from './Counter'; // import 추가
function App() {
const number = 5;
return (
<div>
<MyHeader/>
<Counter/> <!--컴포넌트 추가-->
</div>
);
}
export default App;반응형
페이지가 잘 나온다. 아직 버튼에 대한 이벤트는 없어서 버튼을 눌러도 아무런 반응이 없을 것이다.
여기에서 0은 상태를 나타낼 수 있다. 0에서 시작하고 1씩 증가하고, 1씩 감소하는 count 상태이다.
이 페이지를 react가 의미하는 State로 바꾸기 위해 코드를 수정해보자.
import React, {useState} from 'react'; // State는 reacet의 기능이기 때문에 react를 import해야 한다.
const Counter = () =>{
const [count, setCount] = useState(0);
// useState메서드 : 배열을 반환, 배열의 비구조화 할당을 통해
// 0번째 index count, 1번째 index를 setCount라는 상수로 받아옴
// count는 상태의 값으로 사용
// setCount는 count의 상태를 변화시키는 상태변화 함수로써 사용
// useState(0)은 count 상태의 초깃값(0)을 설정
// 즉 const [상태 변수, 상태 변화 함수] = useState(초깃값);의 형태이다.
const onIncrease = () => {
setCount(count+1);
}
const onDecrease = () => {
setCount(count-1);
}
return (
<div>
<h2>{count}</h2>
<button onClick={onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
)
};
export default Counter;
버튼을 누를 때마다 숫자 값이 변화한다. 이유는 버튼을 눌러 상태 값을 변화할 때마다 return을 다시 해주고 있기 때문이다. 즉 상태 값이 변경 될 때마다 Counter를 호출하고 return을 다시 받아 화면을 새로 그리는 것이다. 이 과정을 리렌더(rerender)라고 한다.
반응형