리액트 state

리액트의 데이터 저장공간 state 만드는 법

 

1. { useState } 상단에 첨부한다.

2. useState{데이터}

 

 

import React, { useState } from 'react';     // 1. state 사용하려면 상단에 이렇게 첨부
import logo from './logo.svg';
import './App.css';

function App() {

  useState('남자 코트 추천');    // 2. [a, b]
  
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ posts }</h3>
        <p>11월 14일 발행</p>
        <hr />
      </div>
    </div>
  );
}

 

useState 함수를 실행해주고 나면 두개의 원소를 가지고 있는 array 를 리턴해준다.

==> [a, b]

a 는 useState() 안에 작성해준 state 데이터 '남자 코트 추천' 이고, b 는 state 데이터 변경함수이다.

 

 

 

 

 

 

 

 

참고) ES6 새로운 문법

 

var [a,b] = [10, 100];

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

 

array, object 에 있던 자료를 변수에 쉽게 담고 싶을 때

좌우 똑같이 형식을 맞춰주면 된다. [ ] = [ ]

 

 

let [글제목, 글제목변경] = useState('남자 코트 추천');

 

따라서 이렇게 쓰는 것이 가능하다.

 

 

 

 

 

 

 

 

 

state 는 ....

1. 변수 대신 쓰는 데이터 저장공간이다.

2. useState() 를 이용해 만들어야 한다.

3. 문자, 숫자, array, object 다 저장가능하다.

 

 

function App() {

  let [글제목, 글제목변경] = useState('남자 코트 추천');

  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목 }</h3>
        <p>11월 14일 발행</p>
        <hr />
      </div>
    </div>
  );
}

 

{ 글제목 } 에 '남자 코트 추천' 글씨가 들어간다.

 

 

 

 

 

 

 

 

3번 특징인 문자, 숫자, array, object 다 저장가능하다.

 

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집']);

  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] }</h3>
        <p>11월 14일 발행</p>
        <hr />
      </div>
    </div>
  );
}

 

여기서는 array 가 들어가있다.

 

 

 

 

 

 

 

 

 

state 를 쓰는 이유

 

{ 변수명 } 이렇게 쓰면 되는데 왜 굳이 state 를 사용하는걸까?

그 이유는 state는 변경되면 HTML 이 자동으로 재랜더링되기 때문이다.

제목을 정렬하든가, 수정하든가... 할 때 새로고침 없이도 HTML 에 랜더링이 된다.

 

그러므로, 자주 바뀌고 중요한 데이터는 state 로 저장해서 쓰는게 좋다.

 

약간 블로그 글 같은 것? 을 떠올리면 쉽다.

 

 

 

 

 

 

 

 

 

밑의 코드에서

따봉=0 에 숫자를 올라가게 하고 싶다면 어떻게 해야할까

 

function App() {

  let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] } <span onClick={()=> {}}>👍</span> {따봉}</h3>   // 함수를 안에 써주기
        <p>11월 14일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3>
        <p>11월 15일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3>
        <p>11월 16일 발행</p>
        <hr />
      </div>
    </div>
  );
}

 

옛날 자바스크립트

onClick = "클릭될 때 실행할 JS"

 

리액트도 마찬가지다.

onClick = { 클릭될 때 실행할 함수 }

 

 

 

 

 

<h3>{ 글제목[0] } <span onClick={()=> {따봉변경('ㄱㄴㄷ')}}>👍</span> {따봉}</h3>

 

 

따봉변경(따봉을 대체할 데이터)

예를 들어, 따봉변경('ㄱㄴㄷ') 를 하면 따봉을 누르는 순간 0이 ㄱㄴㄷ 로 교체가 된다.

 

 

 

 

 

 

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

 

이렇게 해주면 따봉을 누르면 숫자가 1씩 증가한다.

 

 

 

 

 

 

 

 

 

function App() {

  let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
  let [따봉, 따봉변경] = useState(0);
  
  function 제목바꾸기(){
    글제목변경(['여자 코트 추천', 'CSS 공부하기', 'Javascript 공부하기']);
  }
  

  return (
    <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>11월 14일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3>
        <p>11월 15일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3>
        <p>11월 16일 발행</p>
        <hr />
      </div>
    </div>
  );
}

 

버튼을 추가해서 클릭했을때 'HTML 공부하기'가 아닌 '여자 코트 추천' 으로 바꾸게 만들고 싶다면 위와 같이 작성하면 된다.

 

 

그러나 이것은 하드코딩이므로 좀 더 생각해보자.

 

 

 

 

 

 

 

 

참고로,

 

원본 state 는 수정할 수 없다.

예를 들어, 

글제목[0] = 324235; 이렇게는 안된다는 뜻

 

 

 

 

 

 

 

 

 

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

 

그럼 이렇게 복사해서 수정하면 되지 않을까 생각이 될 수도 있는데 결과적으로는 바뀌지 않는다.

왜냐하면 복사가 아닌 똑같은 값을 공유하는 것뿐이기 때문이다.

 

 

 

 

 

 

 

 

 

deep copy : 값 공유가 아니라, 서로 독립적인 값을 가지는 복사

 

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

 

...은 spread 연산자 인데,

...글제목 이렇게 하면 중괄호가 제거 된다.

여기에 다시 [...글제목] 을 통해 중괄호를 씌워 주는 것이다.

완전 별개의 array 가 된다.

 

 

 

 

 

 

 

★ 리액트 대 원칙

immutable date : 모든 state 데이터는 직접 수정되면 안된다. 

글제목[0] = 324235; 금지

 

 

 

 

 

 

 

 

 

Q. 버튼을 누르면 제목들을 글자순 정렬하려면?

 

1. 일단 기존 state 카피본을 만들고

2. 카피본에 수정사항을 반영하고

3. 변경함수()에 집어넣기