목차
- state 설명 (props와 비교)
- 함수형 컴포넌트 useState
- 클래스형 컴포넌트 초기값(constructor, state), setState
1. state 설명 (props와 비교)
state는 컴포넌트 내부에서 바꿀 수 있는, 바뀔 수 있는 값입니다. props는 부모 컴포넌트에서 설정하여 자식 컴포넌트로 전달하거나, 더 바깥의 컴포넌트에서 자기가 감싸고 있는 컴포넌트 내용을 표현하기 위해 썼습니다. 달리 말하면 props는 읽기 전용으로 쓰입니다.
props 포스팅 1번(props의 역할)을 상황으로 예를 들면, App.js에서 name을 설정해줬습니다. 그런데 name이 쓰이는 곳은 부모 컴포넌트가 아니라 자식 컴포넌트인 Second.js입니다. Second.js에서는 name을 수정할 수 없습니다. name을 수정할 수 있는 컴포넌트는 App.js입니다.
react에서 state는 클래스형, 함수형 컴포넌트 두 가지로 나뉩니다. 동일한 기능을 하는 코드를 각각 구현해보았으니 비교해보면서 설명드리겠습니다. 모두 초기값은 'message = 어서오십쇼!', 'color = black'으로 같습니다. '주문', '퇴장', '빨간색', '초록색', '파란색'을 누르면서 각각 message, color가 달라지는 코드입니다.
2. 함수형 컴포넌트 useState
import React, { useState } from "react";
const Say = () => {
const [message, setMessage] = useState("어서오십쇼!");
const onClickEnter = () => setMessage("주문 어떻게 해드릴까요?");
const onClickLeave = () => setMessage("안녕히 가세요. 다음에 뵙겠습니다!");
const [color, setColor] = useState("black");
return (
<div>
<button onClick={onClickEnter}>주문</button>
<button onClick={onClickLeave}>퇴장</button>
<h1 style={{ color }}>{message}</h1>
<button style={{ color: "red" }} onClick={() => setColor("red")}>
빨간색
</button>
<button style={{ color: "green" }} onClick={() => setColor("green")}>
초록색
</button>
<button style={{ color: "blue" }} onClick={() => setColor("blue")}>
파란색
</button>
</div>
);
};
export default Say;
import React from "react";
import Say from "./Say";
function App() {
return <Say />;
}
export default App;
제 개인적으로 가장 헷갈렸던 부분은
const [message, setMessage] = useState("어서오십쇼!");입니다.
message, setMessage 변수가 '2'개 인데, 왜 useState에 arguement가 하나일까? 궁금했습니다. useState만 알면 함수형 컴포넌트의 state는 알 수 있습니다.
useState의 첫번째 파라미터는 '현재 상태'이고, 두 번째 파라미터는 현재 상태를 바꿔주는 함수였습니다.
const [message, setMessage] = useState("어서오십쇼!")는 "message = '어서오십쇼!'", setMessage는 message(현재 상태)를 바꿔줄 함수입니다.
어렵게 생각할 것 없이 하단의 onClickEnter, onClickLeave는 arrow function을 이용해 onClick이 발생했을 때 사용하려고 선언한 것일 뿐입니다.
setColor도 마찬가지로 color를 바꿔줄 함수입니다. 여기서 '퇴장', '초록색'을 클릭하면 onClickLeave -> setMessage, setColor이 실행됩니다. 중괄호({}) 때문에 헷갈리지만 javascript란 점을 감안하고 보시면, 새로운 문법이 아닙니다.
3. 클래스형 컴포넌트 state, setState
함수형 컴포넌트 useState와 다르게 클래스형 컴포넌트는 초기값을 아래처럼 선언해주거나, consturctor 메소드로 지정해줘야 합니다. state값을 수정하려면 setState 메소드를 사용해야 합니다. useState와 다르게 arugment가 object(객체)인 점을 주의해야 합니다.
{변수: "수정하고 싶은 값"} 형식으로 setState 메소드로 state를 수정합니다. 클래스이므로 함수를 호출할 때, this.를 추가해 준 점 외에는 크게 달라진 점이 없습니다.
// class_say.js
import React, { Component } from "react";
class Say extends Component {
state = {
message: "어서오십쇼!",
color: "black",
};
onClickEnter = () => this.setState({ message: "주문 어떻게 해드릴까요?" });
onClickLeave = () =>
this.setState({ message: "안녕히 가세요. 다음에 뵙겠습니다!" });
render() {
const { color, message } = this.state;
return (
<div>
<button onClick={this.onClickEnter}>주문</button>
<button onClick={this.onClickLeave}>퇴장</button>
<h1 style={{ color }}>{message}</h1>
<button
style={{ color: "red" }}
onClick={() => this.setState({ color: "red" })}
>
빨간색
</button>
<button
style={{ color: "blue" }}
onClick={() => this.setState({ color: "blue" })}
>
파란색
</button>
<button
style={{ color: "green" }}
onClick={() => this.setState({ color: "green" })}
>
녹색
</button>
</div>
);
}
}
export default Say;// App.js
import React from "react";
import Say from "./class_say";
function App() {
return <Say />;
}
export default App;
