[React] useState()

1. useState() 사용하기

useState를 사용하려면 우선 상단에 useState를 import 해야 한다.
useState라고 입력 후 엔터를 치면 상단에 자동으로 import 된다.
state는 최상위 컴포넌트에 만드는게 좋다. 부모>자식 간 props 전송은 가능하지만 반대는 안되기 때문이다.

import { useState } from 'react';

2. useState() 문법

import { useState } from 'react';

function App () {
  let [작명 set작명] = useState('보관할 자료');

  return (
    <div>
      <button onClick={set작명('바뀔자료')}>누르면 작명이 바뀐다</button>
      { 작명 }
    </div>
  )
}

export default App;

let [작명 set작명] = useState(‘보관할 자료’);

• 작명 : state에 보관된 자료 (변수와 비슷하다)
• set작명 : state 변경을 도와주는 함수 set작명(‘바뀔자료’)

Destructuring 문법

let num = [1, 2];   
let a = num[0];   
let c = num[1];   

위 3줄은 아래 1줄과 같다.
let [a,c] = [1,2];

3. useState() 언제 사용할까?

state는 값이 변경되면 state를 사용하고 있는 HTML이 자동으로 재렌더링 된다.
값 변경 시 자동으로 HTML을 재렌더링 하고싶을 때 사용한다.

4. State 를 이용해 좋아요 기능 만들기

style은 알아서 작성하도록 하자
setLike 함수를 어떻게 사용하는지 보자.
좋아요를 click 할 때마다 기존 like에 1을 더한 값을 setLike에 넣어줬다.
좋아요를 누를때마다 그 값으로 대체되어 바로 보여진다.

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

function App() {
  let [title, setTitle] = useState('글 제목');
  let [like, setLike] = useState(0)

  return (
    <div className="App">
      <div className="black-nav">
        <h1>Blog</h1>
      </div>
      <div className="list">
        <h4>
          { title }
          <span onClick={ ()=>{ setLike(like+1) } }>좋아요 { like }</span>
        </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  )
}

export default App;