[react] state 사용해보기

state 문법을 언제 어디서 사용해야할까??

1. 변수가 변경될 가능성이 있을 때 

2. 변수가 변경될 시 자동으로 html에 반영되게 하고 싶을 때

3. 자주 변경될거같은 html 부분

 

let store 라는 변수가 있다.

이 변수가 처음에는 '강남 백화점'이었다가 후에 '홍대 백화점'으로 변경되었을 때, html에는 바로 반영이 안된다.

따로  코드를 손봐줘야하는 번거로움이 있다.

 

하지만 state의 경우에는 담은 내용이 변경되었을 때,

html이 자동 재렌더링 되어 따로 손봐줄 필요가 없다.

 

텍스트 요소 뿐만 아니라 className과 같은 요소에도 사용할 수 있다.

 

 

------------------------------------------------------------------------------------------------------------------------------------------------

 

 

블로그에서 불러올 목록을 셋팅해보자

여기서 주의할 점은 html코드를 작성할 때 return의 소괄호 () 안에 작성해야 한다는 점, 

그리고 return() 안에서는 최상위에 하나의 태그로 감싸야한다는 점이다.

 

아래처럼 하면 안 된 다 !

return (
        <div className="App">
        </div>
        <div className="List">
        </div>
    );
}

 

그러니 className이 App인 태그 내에 모든 코드를 넣어줘야한다.

 

우선 임시로 목록을 하나 만들어 css로 레이아웃을 잡아주자

    return (
        <div className="App">
            <div className='blog-title'>
                <h3>리액트 블로그</h3>
            </div>
            <div className='list'>
                <ul>
                    <li>
                        <h5>글제목</h5>
                        <p>2022-10-02</p>
                    </li>
                      <li>
                        <h5>글제목</h5>
                        <p>2022-10-02</p>
                    </li>
                      <li>
                        <h5>글제목</h5>
                        <p>2022-10-02</p>
                    </li>
                </ul>
            </div>
        </div>
    );

 

그리고 이전에 아래처럼 변수에 담아서 html코드 내에서 사용할 수 있었다.

let post = '게시글의 제목입니다.'

 

그런데 리액트에서는 이런 변수 말고 state라는 것을 사용할 수 있다.

App함수 내에서 return 전에 useState라고 입력해보면, App함수 바깥에 useState가 자동으로 import된다.

 

import { useState } from 'react';  // <---- 자동으로 생김

function App() {
    let post = '게시글의 제목입니다.';
    useState() // <---- 입력하면 위에 자동으로 import됨

    return ( ~~~ )
}

 

그리고 useState()를 사용하는 방법은 소괄호 안에 보관할 자료를 입력하면 된다.

useState('코트 추천')

 

보관한 자료를 사용하고 싶으면 destructuring 문법으로 담아주면 된다.

destructuring 문법이란 ? 

let [name, age] = ['Kim', 20]

이와 같이 배열을 갯수에 맞게 맞추어 선언해주면

name = 'kim', age = 20 이라고 각각 변수가 생성된다.

 

useState에서는 [담은내용, state변경을 도와주는 함수] 이렇게 배열이 발생하기 때문에 우리는 이렇게 사용하면된다.

let [state이름, 함수이름] = useState('코트 추천');

그리고 한번 사용해보자. 

let [a, b] = useState('코트 추천');
return (
    <div className="App">
        ~~~~
        <li>
            <h5>{a}</h5>
            <p>2022-10-02</p>
        </li>
        ~~~~~
	<div>
)

 

우선 구분이 쉽게 a와 b라고 하고 중괄호로 불러와보면 잘 들어가지는게 확인된다.

하나의 state에 여러 내용을 담고싶으면 배열로 담아도 괜찮다.

let [state이름, 함수이름] = useState(['코트 추천', '가디건 추천', '패딩 추천']);

 

이제 이 하나의 state로 블로그에 목록을 불러와보자

 <div className='list'>
    <ul>
        <li>
            <h5>{listTitle[0]}</h5>
            <p>2022-10-02</p>
        </li>
        <li>
            <h5>{listTitle[1]}</h5>
            <p>2022-10-02</p>
        </li>
        <li>
            <h5>{listTitle[2]}</h5>
            <p>2022-10-02</p>
        </li>
    </ul>
</div>