useState는 함수형 컴포넌트 안에서 state를 사용할 수 있게 해주는 기본 Hook입니다. useState에서는 주요 키워드인 state와 setState가 무엇인지 간단하게 살펴보겠습니다.
React에서의 state는 데이터가 관리 및 저장되는 공간을 의미합니다. React에서는 state가 어떻게 쓰이는지, state 사용 예제를 통해 간단하게 살펴보겠습니다.
// 함수형 컴포넌트
function Product() {
// const [state, setState] = useState(초깃값);
const [**price**, setPrice] = **useState(1000)**;
// 클래스형 컴포넌트
class Product extends React.Component {
constructor(props) {
super(props);
**this.state = {
price: 1000
}**;
}
위의 코드는 함수형 컴포넌트와 클래스형 컴포넌트 안에서 state를 사용한 예시입니다. 함수형 컴포넌트에서는 useState Hook을 사용하여 첫 번째 인자인 변수 price에 상태 값으로 1000인 초깃값을 넣어주었습니다.
반면, 클래스형 컴포넌트는 this.state = { price: 1000 }; 을 사용하여 price를 1000으로 초기화해주었습니다. 클래스형 컴포넌트에서는 반드시 constructor(생성자) 안에서 this를 사용하여 값을 초기화해주어야 합니다.
state는 JavaScript의 객체이며, 컴포넌트 안에서 관리됩니다. 컴포넌트는 자신의 state를 props를 통해 자식 컴포넌트에 전달하고 영향을 미칠 수 있습니다. state를 가진 컴포넌트 외에 다른 컴포넌트는 접근할 수 없기 때문에, 로컬 또는 캡슐화라고 표현되기도 합니다.
<aside> 💡 props는 무엇인가요?
props도 속성을 나타내는 데이터이자, JavaScript의 객체입니다. 컴포넌트 안에서 관리되는 state와 다르게 **‘컴포넌트에 전달한다’**는 방식의 차이가 있습니다.
React 컴포넌트들은 자신의 props를 자체적으로 수정해서는 안 되며, 입력값에 대한 결과가 변함없이 동일한 순수 함수처럼 동작해야 합니다.
아래 렌더링 예시를 통해 props를 살펴보겠습니다.
function Introduce(props) { // --- ②
return <h1>나는 {props.color}색을 좋아해!</h1>;
}
const root =
ReactDOM.createRoot(document.getElementById("root"));
const element = <Introduce color="초록" />; // --- ①
root.render(element);
<Introduce color=”초록” /> element로 root.render()를 호출합니다.{color: “초록”} 단일 객체를 Introduce 컴포넌트에 호출되어 전달받고, 화면에서는 Introduce 컴포넌트가 반환한 값, 나는 초록색을 좋아해! 가 나타납니다.즉, 해당 컴포넌트에 단일 객체로 전달하는데 바로 이 ‘단일 객체’가 props입니다.
</aside>
위에서 state는 컴포넌트 안에서 데이터가 관리되고 저장되는 공간임을 알아보았습니다. state의 값을 갱신하기 위해서 함수형 컴포넌트와 클래스형 컴포넌트에서는 setState 함수를 이용합니다. 아래 코드는 클래스형 컴포넌트에서 setState를 사용한 예시 코드이며, 함수형 컴포넌트에서의 사용 방법은 2.3.3 챕터에서 자세히 살펴보겠습니다.