[React] state

A. state가 뭐죠?

자료를 저장할 땐 변수를 사용했다. 자바스크립트에서 변수를 생성할 땐 let, var, const를 사용했는데, React에선 변수뿐 아니라 state문법을 사용할 수 있다.

일반 변수는 변경되면 html에 자동으로 반영되지 않는다. 하지만 state의 경우엔 자동으로 html에 재렌더링된다.

⇒ 변수가 변경되면 HTML도 자동으로 재렌더링 되는 걸 원하면 state 쓴다.

렌더링
웹 브라우저의 렌더링 엔진이 HTML, CSS 문서를 읽어내 웹사이트 모습을 그려주는 것

 

 

---

B. state 어떻게 쓰죠?

1. import

import logo from './logo.svg';
import './App.css';
import { useState } from 'react'; //state 사용하기 위해 import!

2. useState(보관할 자료)

3. let [작명1, 작명2]

let [작명1, 작명2] = useState(보관할 자료)

작명1 - state에 보관했던 자료

작명2 - state 변경도와주는 함수

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

function App() {

  // post 변수가 서버에서 가져온 데이터라고 가정
  let post = '블로그 글 제목';

    // state!
  let [title, b] = useState('오늘 점심 추천');

  return (
    <div className="App"> 
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      <div className="list">
        <h4>{ title }</h4>
        <p>10월 9일 발행</p>
      </div>
    </div>
  );
}

export default App;

3-1. JS Destucturing 문법

// 평범한 자바스크립트 array
let num = [1, 2];
let a = num[0]; // a = 1
let b = num[1]; // b = 2

// Destructuring
let [c, d] = [1, 2]; // c = 1, d = 2

// React state문법에서 사용된 Destructuring
let [title, b] = useState('오늘 점심 추천');
// useState('오늘 점심 추천') => ['오늘 점심 추천', 함수] 형태임
// => title = '오늘 점심 추천', b = 함수

 

---

C. state 변경하는 법

let [작명1, 작명2] = useState(보관할 자료)

작명1 - state에 보관했던 자료

작명2 - state 변경도와주는 함수

 

이번엔 state 변경도와주는 함수를 써보겠습니다.

function App() {

  // post 변수가 서버에서 가져온 데이터라고 가정
  let post = '블로그 글 제목';
  let [title, b] = useState(['오늘 점심 추천', '오늘 저녁 추천', '내일 아침 추천']);
  let [like, likeChange] = useState(0);

  return (
    <div className="App"> 
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className="list">
        <h4>{ title[0] } <span onClick={ () => { likeChange(like+1) } }>👍</span> {like} </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

span 태그 안에 감싸진 따봉버튼을 누르면 like가 1씩 증가합니다.

 

<span onClick={ () => { likeChange(like+1) } }
자바스크립트에서 함수 만드는 방법을 알아보자…

// 함수 만드는 방법 1
function 함수(){
    console.log(1)
};
<span onClick={ 함수 }>클릭</span>

// 함수 만드는 방법2
<span onClick={ function(){ console.log(1) } }>클릭</span>

// 함수 만드는 방법3
<span onClick={ () => { console.log(1) } }>클릭</span>

위 세 방법은 모두 같은 동작을 한다.

1 → 3으로 가면서 점점 축약 했을뿐이다.

 

다음 글 : state 변경함수 더 알아보기

https://moon-coding.tistory.com/54