[포스코x코딩온] 웹 풀스택 과정 12주차 회고 | React - State

 

🎈 state

• 앱의 유동적인 데이터를 다루기 위한 개체
• 계속해서 변하는 특정 상태이며, 상태에 따라 다른 동작을 하도록 한다.
• State가 변경될 시, 자동으로 재렌더링! (변수와의 차이점)
  

  

• state는 특정 컴포넌트가 갖는 상태(값)를 뜻하므로, 내부에서 선언되고 내부에서 값이 변경된다.
• props는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달할 때 사용하는 것으로, 단방향 흐름이기 때문에 전달받은 props를 변경할 수 없다.

💡 클래스형 컴포넌트에서 state 다루기

• state를 초기화한다.

class StateComponent1 extends Component {
  state = {
    message: "검정색 글씨",
    style: {color: "black"}
  }
}

• this.state로 state 불러올 수 있다.

render(){
  return (
    <>
      <h1 style={this.state.style}>{this.state.message}</h1>
      <button onClick={this.redColor}>빨간색</button>
      <button onClick={this.blueColor}>파란색</button>
    </>
  )
}

• setState()으로 state 변경할 수 있다. (this.state를 직접 변경하지 말 것)
• setState()는 비동기적으로 동작하므로, 필요한 경우 함수 형태의 setState를 사용해야 한다.

redColor = () => {
  this.setState((prevState)=>({
    message: "빨간색 글씨",
    style: {color: "red"}
  }))
}
blueColor = () => {
  this.setState((prevState)=>({
    message: "파란색 글씨",
    style: {color: "blue"}
  }))
}

배열에 값을 추가하고 싶은 경우, spread 연산자를 이용하면 된다.

• input에 입력한 값을 onChange 이용하여, state에 저장한다.

this.state = {
  inputWriter: "",
  inputTitle: "",
  comments: [],
}
.
.
.
render() {
  const {inputWriter, inputTitle, comments} = this.state;
  <>
  <input type="text" value={inputWriter} onChange={(e)=>this.setState(inputWriter: e.target.value)}/>
  <input type="text" value={inputTitle} onChange={(e)=>this.setState(inputTitle: e.target.value)}/>
    <button type="button" onClick={this.addComment}>작성</button>
  </>
}

• spread 연산자를 이용하여 state 내 배열에 값을 추가할 수 있다.

addComment = () => {
const newComment = {
  writer: this.state.inputWriter,
  title: this.state.inputTitle,
}
this.setState({
  comments: [...this.state.comments, newComment],
  inputWriter: "",
  inputTitle: "",
})
}

💡 함수형 컴포넌트에서 state 다루기

Hook 이라는 React의 새로운 기능을 이용하여, 기존 클래스형에서만 다룰 수 있었던 state를 이제 함수형 컴포넌트에서도 다룰 수 있다!
※ Hook 사용 규칙

• 최상위 단계에서만 호출이 가능하다. (반복문, 조건문, 중첩된 함수 내부에서 hook 호출할 수 없음)
• React 함수형 컴포넌트 안에서만 호출이 가능하다.

useState()

• useState()는 아래와 같은 형태로, state를 설정 및 초기화할 수 있다.

const [number, setNumber] = useState(0)
// 첫번째 원소(ex. number): 현재 상태
// 두번째 원소(ex. setNumber): 상태를 바꿔주는 setter 함수 (주로, 첫번째 원소에 set을 붙여 명명한다.)
// useState(): 괄호 내에 원하는 초기값을 입력한다.

• 설정해준 setter 함수에 새로운 값을 넣어 state를 다룰 수 있다.

const [inputWriter, setInputWriter] = useState("");
const [inputTitle, setInputTitle] = useState("");
const [comments, setCommnets] = useState([]);

const addComment = () => {
  setComments([...commnents, {writer: inputWriter, title: inputTitle}]);
  setInputWriter("");
  setInputTitle("");
}

return (
  <>
  <input type="text" value={inputWriter} onChange={(e)=>this.setInputWriter(e.target.value)}/>
  <input type="text" value={inputTitle} onChange={(e)=>this.setInputTitle(e.target.value)}/>
    <button type="button" onClick={addComment}>작성</button>
  </>
)