State 란?
현재 가지고 있는 형태나 모양을 정의. 변화할 수 있는 동적인 값.
State는 “상태”를 뜻하며, 이는 일상에서도 자주 사용하는 단어입니다.
- 켜진 상태의 전구
- 꺼진 상태의 전구
이처럼 “상태”는 어떤 사물이 현재 가지고 있는 모습이나 형편을 나타내는 말입니다. 모든 사물은 자신이 가진 현재의 상태에 따라 각기 다른 모양이나 동작을 하게 됩니다.
React에서 State는 변경 가능한 값입니다. 예를 들어, 켜진 상태의 전구를 끄면 State가 켜진 상태에서 꺼진 상태로 바뀌고, 반대로 꺼진 상태의 전구를 켜면 State가 꺼진 상태에서 켜진 상태로 변합니다. React의 컴포넌트들은 자신의 형태나 모양을 정의하는 State를 가질 수 있습니다.
State는 컴포넌트의 현재 상태를 저장하는 변수로, 이를 통해 컴포넌트는 현재 상태에 따라 각기 다른 UI를 렌더링합니다. 컴포넌트가 현재 상태를 기반으로 다시 렌더링되는 과정을 리렌더(Re-Render) 또는 리렌더링(Re-Rendering)이라고 부릅니다.
결론적으로, React에서는 각 컴포넌트에 상태를 나타내는 값, 즉 변화 가능한 State를 정의할 수 있습니다. 또한, 하나의 컴포넌트에서 여러 개의 State를 정의하여 더욱 다양한 상태와 동작을 관리할 수 있습니다.
// 전구의 점등 상태
isLightOn (state)
// 전구의 고장 유무
isBroken (state)
// 전구의 더러움 유무
isDirty (state)
useState 사용하기
함수 컴포넌트에서 State를 생성하려면 React가 제공하는 내장 함수인 useState를 사용해야 합니다.
import { useState } from "react";
function App() {
return <></>;
}
export default App;useState 함수를 호출한 반환값을 변수에 담고, 그 결과를 확인해보겠습니다.
import { useState } from "react";
function App() {
const state = useState();
console.log(state); // [undefined, f]
return <></>;
}
export default App;출력 결과는 [undefined, f]로, 두 개의 요소를 포함한 배열이 반환됩니다.
- 첫 번째 요소 : undefined (값이 없음)
- 두 번째 요소 : 함수
useState() 함수는 두 개의 요소를 가진 배열을 반환합니다. 이 배열의 첫 번째 요소는 새로 생성된 state의 값입니다.
만약 useState를 호출할 때 초기값을 설정하면, 첫 번째 요소에 초기값이 저장됩니다. 예를 들어, 초기값을 숫자 0으로 설정하면 다음과 같은 결과를 얻을 수 있습니다:
import { useState } from "react";
function App() {
const state = useState(0);
console.log(state); // [0, f]
return <></>;
}
export default App;이 경우 배열의 첫 번째 요소는 우리가 설정한 초기값 0이고, 이것이 state의 값이 됩니다.
배열의 두 번째 요소는 state를 변경할 수 있는 함수입니다. 이 함수를 상태 변화 함수라고 부릅니다.
정리하자면, useState 함수는 새로운 state를 생성할 때 사용되며, 인수로 state의 초기값을 받아 두 개의 요소를 담은 배열을 반환합니다. 이 배열의 첫 번째 요소는 state의 현재 값이고, 두 번째 요소는 state를 변경하는 함수입니다.
그렇기 때문에 반환값을 변수에 저장하기 보다는 구조 분해 할당 문법을 이용합니다.
import { useState } from "react";
function App() {
const [state, setState] = useState(0);
console.log(state); // 0
return <></>;
}
export default App;이제 h1 태그 안에 만들어준 state를 렌더링 시켜줍니다.
import { useState } from "react";
function App() {
const [state, setState] = useState(0);
return (
<>
<h1>{state}</h1>
</>
);
}
export default App;이번에는 버튼을 만들어, 버튼을 클릭할 때마다 state 값이 증가하는 기능을 구현해 보겠습니다. onClick 이벤트를 사용해 버튼이 클릭되었을 때 상태 변화 함수인 setState()를 호출합니다. 이 함수에 변경하고자 하는 새로운 state 값을 인수로 전달하면, state를 업데이트할 수 있습니다.
import { useState } from "react";
function App() {
const [state, setState] = useState(0);
return (
<>
<h1>{state}</h1>
<button onClick={() => { setState(state + 1); }}>
+
</button>
</>
);
}
export default App;이처럼 컴포넌트 내에서 새로운 state를 생성하고, 버튼 클릭으로 해당 state 값을 변경하면 React는 내부적으로 App 컴포넌트의 state가 변경되었음을 감지하여 App 컴포넌트를 리렌더링합니다.
참고로, 함수 컴포넌트를 리렌더링한다는 것은 구체적으로 말하면, 컴포넌트 역할을 하는 App 함수를 다시 호출하고, 새롭게 반환된 값을 렌더링한다는 의미입니다.
다른 state 생성을 위해 기존의 state 명을 state에서 count로 변경해줍니다.
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>{count}</h1>
<button
onClick={() => {
setCount(count + 1);
}}
>
+
</button>
</>
);
}
export default App;전구의 상태를 저장하는 state를 생성하고, 초기값을 "OFF"로 설정합니다. 그런 다음 버튼을 만들어 버튼을 클릭하면 전구의 상태를 ON과 OFF로 전환할 수 있도록 구현합니다.
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const [light, setLight] = useState("OFF");
return (
<>
<div>
<h1>{light}</h1>
<button
onClick={() => {
setLight(light === "ON" ? "OFF" : "ON");
}}
>
전구 끄기/켜기
</button>
</div>
<div>
<h1>{count}</h1>
<button
onClick={() => {
setCount(count + 1);
}}
>
+
</button>
</div>
</>
);
}
export default App;위의 코드에서 "전구 끄기/켜기" 문구도 삼항연산자로 바꿀 수 있습니다.
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const [light, setLight] = useState("OFF");
return (
<>
<div>
<h1>{light}</h1>
<button
onClick={() => {
setLight(light === "ON" ? "OFF" : "ON");
}}
>
{light === "ON" ? "끄기" : "켜기"}
</button>
</div>
<div>
<h1>{count}</h1>
<button
onClick={() => {
setCount(count + 1);
}}
>
+
</button>
</div>
</>
);
}
export default App;React 컴포넌트는 일반적인 변수와 달리, state 값이 변경될 때만 리렌더링됩니다.
따라서 React 컴포넌트에서 변화하는 가변적인 값을 관리하고, 이를 화면에 렌더링하고자 한다면 일반 변수가 아닌 state를 사용해야 합니다.
