State
state는 왜 불변성을 갖는가?
- 예측 가능성과 추적 가능성을 위해, 상태가 계속 변경된다면 코드 실행 흐름을 예측하기 어렵기 때문
- 순수성과 테스트 용이성, 불변한 상태를 사용하면 순수 함수를 더 쉽게 작성할 수 있다. 순수 함수는 외부의 상태를 변경하지 않고 동일한 입력에 동일한 출력을 내놓는 함수를 말한다. 이렇게 되면 테스트가 더 쉬워지고 버그가 줄어들게 된다.
이런 State를 변경할 수 있는 것은 setState() 함수다. 상태를 직접 수정하는 것이 아니라 setState() 를 통해 변경을 예약하고, 리액트가 내부적으로 상태를 업데이트 하고 컴포넌트를 다시 렌더링하게 된다.
컴퓨터 입장에서 state는 어떻게 동작하는가 ?
컴퓨터의 관점에서 리액트 컴포넌트의 상태는 메모리 내의 특정 위치에 할당되어 관리된다.
여기서 상태란 컴포넌트가 가지고 있는 데이터를 말하는데,
상태는 컴포넌트의 구조와 함께 메모리에 저장되고, 컴포넌트가 생성되거나 업데이트 될 때마다 상태의 변화가 이루어진다.
일반적으로 리액트 컴포넌트의 상태는 자바스크립트 객체로 표현되는데, 이 객체는 컴포넌트가 가진 데이터와 그 데이터에 접근하고 변경하기 위한 메서드(함수)를 포함하고 있다.
예를 들어, 클래스 컴포넌트에서 setState 함수를 사용하면 해당 컴포넌트의 상태 객체가 업데이트 되고, 컴포넌트가 다시 렌더링되면서 화면에 변경된 상태가 반영된다.
컴퓨터가 상태를 관리하고 사용하는 방식은 다소 복잡하지만,
리액트가 추상화를 통해 이를 단순화하고 개발자들이 더 편리하게 상태를 다룰 수 있도록 도와준다.
상태 변화가 필요한 경우, 개발자는 setState 함수를 호출하여 변경 사항을 예약하고, 리액트는 내부적으로 상태를 관리하고 변경된 부분만 업데이트 하여 화면을 다시 그린다.(DOM 관련)
즉 컴퓨터는 상태를 메모리에 할당하고, 리액트는 이 상태를 관리하여 컴포넌트가 예측 가능하게 동작하고 화면에 변화를 반영할 수 있도록 돕는 구조로 동작한다.
useState
import { useState } from "react";
function App() {
const [time, setTime] = useState(1);
const handleClick = () => {
setTime(time + 1)
}
return (
<div>
<span>현재 시각: {time}시</span>
<button onClick={handleClick}>Updates</button>
</div>
);
}
export default App;
UI 상으로 변할 수 있는 값을 주기 위해 {}에 time을 넣어준다.
이것은 JSX 문법 표현식이며, {}안에 변수나 표현식을 넣으면 그 값을 동적으로 UI 에 반영할 수 있게 해준다. (자바스크립트 표현식 삽입)
onClick이라는 이벤트 함수를 통해 ‘handleClick’이라는 함수를 연결해준다. (’handleClick’은 프로퍼티로 전달되는 것, onClick 은 리액트 요소의 프로퍼티라고 할 수 있다.)
그리고 ‘handleClick’ 함수에서는 setTime을 이용해서 time에 +1을 해주므로 우리는 ‘Updates’라는 버튼을 누를 때마다 time이 1씩 증가하는 것을 볼 수 있다.
반대로 -하면 수가 감소된다.
const [time, setTime] = useState("");useState 의 기본적인 구조 형태.
state를 통해 계속 업데이트 되고 리렌더링 되는 것임.
useState란?
리액트의 내장 훅, 함수형 컴포넌트에서 상태를 가질 수 있게 해준다.
클래스 컴포넌트에서의 setState 메서드를 대체하는 역할을 한다.
useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트 할 수 있다.
동작원리
useState는 컴포넌트 상태를 추적하기 위해 fiber 라는 데이터 구조를 사용한다. 상태 변수가 업데이트 되면, 리액트는 새로운 상태와 이전 상태를 비교하고 다시 렌더링이 필요한지 여부를 결정한다. 다시 렌더링이 필요한 경우, 가상 DOM 을 업데이트 하고 실제 필요한 변경 사항을 적용한다
문법
useState 훅은 초기값을 인수로 받고, 현재 상태 값을 포함하는 배열과 상태를 업데이트 하는 함수를 반환한다.
const [state, setState] = useState();import {useState} from "react";
function App() {
const [names, setNames] = useState(["홍길동","김민수"]);
const [input, setInput] = useState('');
const handleInputChage = (e) => {
setInput(e.target.value);
};
console.log(input);
return (
<div>
<input type="text" value={input} onChange={handleInputChage} />
<button>Upload</button>
{names.map((name, idx) => {
return <p key={idx}> {name} </p>;
})}
{/* //네임스 배열을 돌면서 아이템 하나하나 마다 p태그 붙여준거임 */}
</div>
);
}
export default App;이 코드에서 input 태그의 value 속성에 input 상태 변수를 넣어주는 이유는 입력 상자의 값과 리액트 컴포넌트의 상태를 동기화하기 위함입니다. 이를 "제어 컴포넌트(controlled component)"라고 부릅니다.
- 상태와 입력 동기화:
value={input}을 사용하면input변수의 값이 항상 입력 상자의 값과 일치하게 됩니다. 이렇게 하면 입력 상자의 값이 변경될 때마다 해당 값을 상태로 관리할 수 있으며, 필요에 따라 다른 로직과 연동할 수 있게 됩니다. - 상태 변경 감지:
onChange이벤트 핸들러를 사용하면 사용자가 입력 상자에 무언가를 입력하거나 변경할 때마다 이를 감지하고 반응할 수 있습니다. 이 예제에서는handleInputChange함수가onChange이벤트에 연결되어 있으며, 사용자의 입력을input상태 변수에 반영합니다.
이러한 방식으로 구현하면, 상태 변수를 통해 입력 상자의 값을 완벽히 제어할 수 있게 되어, 나중에 해당 값을 다른 기능과 연동하거나, 유효성 검사를 수행하고, 다른 컴포넌트와 공유하기 등의 작업이 용이해집니다.
useState의 힘
- 상태관리의 간소화
- 하나의 컴포넌트에서 여러 개의 상태 변수를 가질 수 있다
- 상태가 변경될 때만 다시 렌더링을 트리거 한다
