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;