state의 정의 및 사용방법

리액트에서의 state 정의 및 사용방법

 일반 자바스크립트에서는 데이터를 저장하기 위해

let 변수이름 = '데이터';

라는 식으로 변수에 데이터를 저장했었다.
 하지만 리액트에서는 보통 변수 말고, state를 만들어서 데이터를 저장한다.
데이터의 값이 잘변 하지 않는 값은 변수에 저장하거나 하드 코딩해도 되지만, 값이 자주 바뀔거 같으면 state에 값을 저장하는 것이 좋다.(그냥 웬만하면 state 쓰는 것이 좋다)

이는 리액트의 동작 방식 등과 관련이 있는데 해당 내용은 추후에 다루도록 하겠다.
일단 state의 사용방법은 다음과 같다.

import { useState } from 'react';
import './App.css'

function App(){
 
  let [shirts, setShirts] = useState('남자 코트 추천');
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

 위와 같이 일단 맨 윗줄에 {useState} from 'react' 하고
원하는 곳에서 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있다.

(참고로 useState 안의 변수값은 문자열과 숫자 등 다양한 자료형이 다 들어갈 수 있다.)
그리고 저장한 자료를 나중에 쓰고 싶으면 

let [shirts, setShirts] = useState('남자 코트 추천');

shirts 변수 자리에는 state 이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 된다.
만약 shirts 안의 값을 '남자 코트 추천'이 아닌 다른 값으로 변경하고 싶다면, 반드시
state 변경함수인 setShirts('변경할 데이터'); 로 변경해야 된다.
 통상적으로 shirts 자리의 변수 이름은 자유롭게 작명해도 되지만,
setShirts 자리의 데이터 변경 함수의 이름은 변수 앞에 set을 붙여주는 것이 프로그래밍 관행이다.

예시)

let [변수이름, set변수이름] = useState(0);

 

 

그렇다면 State를 왜 사용하는 것인가?

state를 하나 만들어서 {글제목} 이렇게 데이터바인딩 해놨다고 가정해보자.
근데 갑자기 state에 있던걸 '남자 코트 추천' -> '여자 코트 추천' 이렇게 바뀌었다.
state는 당신이 개입하지 않아도 변경 사항을 html에 자동으로 적용 시켜준다.
왜냐하면 state의 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해주기 때문이다.
이러한 state의 특징 덕분에 UI의 기능 개발이 매우 편리해지고, 사이트가 부드럽고 자연스럽게 동작하게 된다.
state의 가장 큰 장점은 state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것이다.

 그런데 로고명은 아예 바뀔 일이 없으니 의미가 없고, state는 상품명, 글제목, 가격 이런것처럼 자주 변할 것 같은 데이터들을 저장하는게 좋은 관습이다.

 

useState를 사용한 예시 코드(좋아요 버튼 만들기)

좋아요 이모티콘을 클릭하면 좋아요 숫자가 오르는 예제를 만들어보자. 기본 스켈레톤 코드는 아래와 같다.

기본 코드(틀린 예시)

function App(){
  
  let [ like ] = useState(0);
  // 일반 자바스크립트에서 변수를 변화시킬 때의 코드 짜는 방법
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ like = like + 1 } } >👍</span> { like }</h4>
  )
}

일반적인 자바스크립트에서는 위처럼 작성하면 되겠지만,

 리액트 환경에서는 위처럼 코드를 작성하면 안되고, 변수값이 바뀔 경우 반드시 state 변경함수를 써줘야 한다.
올바는 사용 방법은 아래와 같다.

기본 코드(옳은 예시)

function App(){
  
  let [ like, setLike ] = useState(0);
  // state 값을 변경할 때에는 아래와 같이 setLike와 같은 state 변경함수를 써줘야한다.
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ setLike( like + 1) } } >👍</span> { like }</h4>
  )
}

사용법은 setLike(새로운state) 방식으로 사용하면 된다.
setLike(1) 이라고 하면 like의 state가 1로 변경되고,
setLike(100) 이라고 하면 like의 state가 100로 변경된다.

따라서 좋아요 버튼을 클릭할 때마다 좋아요 수를 늘려주기 위해서는
setLike( like + 1) 처럼 state 변경 함수의 파라미터에 깔끔하게 새로운 state 값을 집어넣어주면 된다

 

[출처]

코딩애플 "React 리액트 기초부터 쇼핑몰 프로젝트까지!"

State 관련 리액트 공식문서