[React]state 사용하는 방법

[React]state 사용하는 방법

state란?

state는 리액트에서 변수 대신 사용하는 데이터 저장공간으로 문자, 숫자, array, object 모두 저장 가능하다. 변수가 아닌 state를 사용하는 이유는 html을 새로고침 없이 자동으로 재렌더링할 수 있기 때문이다. 변경이 자주 일어나거나 중요한 데이터를 주로 저장하고 직접적인 값 변경이 불가능하기 때문에 대체함수를 사용한다.

useState 사용하는 방법

state에는 클래스형 컴포넌트가 가지고 있는 state와 함수형 컴포넌트가 가지고 있는 useState가 있가. 여기서는 자주 사용하는 함수형 컴포넌트가 가진 useState 사용법을 소개한다.

1.React가 가지고 있는 useState를 첨부한다.

import React, {useState} from 'react';

2.useState()를 생성한다.

let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
let [따봉, 따봉변경] = useState(0);

3.state에 담아둔 데이터를 바인딩한다.

<h3> { 글제목[0] } <span>👍</span>{따봉}</h3>

 

useState 데이터 변경

state의 대체함수(카피본)를 사용하여 데이터를 변경한다.

변경하는 방법

글제목변경(newArray); // 함수를 만들어서 넣어서 대체함수를 변경할 경우
글제목변경(['남자 코트 추천', '강남 우동 맛집','파이썬 독학']); // 하드코딩할 경우

따봉 클릭시 숫자 변경

<h4>{ 글제목[0] } <span onClick={()=>{ 따봉변경(따봉 +1)}}>👍</span> {따봉} </h4>

버튼 클릭시 글제목 변경

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자 코트 변경';
    글제목변경(newArray);
  }

state 변경시 주의 사항

리액트에서는 Immutable data 원칙을 지켜서 데이터를 다뤄야한다. Immutable data 원칙이란 모든 데이터는 직접 수정이 되면 안 된다는 원칙이다. state의 원본을 직접 수정하지 않고 복사본을 생성하여 변경해주는 것이 좋다.

array, object 형태의 state는 그냥 복사하는 것이 아니라 deep copy 해줘야한다. 값을 공유하는 참조형 자료형이 아닌 값을 통째로 복사하는 것이다. 복사하는 방법은 […] 스프레드 오퍼레이터 문법을 사용하여 복사한다. 

var newArray = 글제목; // 잘못된 예 : 참조형 자료형(값 공유)
var newArray = [...글제목]; // 올바른 예 : []를 지우고 다시 []를 만들어주세요.

 

전체 코드

App.js

/* eslint-disabl */

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']);
  let [따봉, 따봉변경] = useState(0);
  let posts = '강남 고기 맛집';

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자 코트 변경';
    newArray[1] = '연희동 맛집 추천'
    글제목변경(newArray);
  }

  return ( //return 안쪽에 html 문법을 작성할 수 있다.
    <div className="App">
      <div className="black-nav">
         <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className='list'>
        <h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉+1)} }>👍</span>{따봉}</h3>
        <p>12월 17일 발행</p>
        <hr/>
      </div>
      <div className='list'>
        <h3> { 글제목[1] } </h3>
        <p>12월 17일 발행</p>
        <hr/>
      </div>
      <div className='list'>
        <h3> { 글제목[2] } </h3>
        <p>12월 17일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
}

body {
  font-family: "nanumsquare";
}

.black-nav {
  background-color: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

.list {
  margin-top: 30px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

결과 화면