React 리액트 useState 기초 사용방법

오늘은 React에서 useState 기초에 대해 알아보겠습니다.

우선 조건은 아래와 같습니다.

 

1. 버튼을 클릭했을때 '테스트1'의 텍스트를 내가 원하는 값으로 바꿔야 함.
2. 👍 버튼을 눌렀을 때 오른쪽의 숫자의 값이 1씩 늘어나야 함.

 

App.tsx

 

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

function App() {
    // 아래 글제목 에는 ['테스트1', '테스트2', '테스트3'] 배열을 지정해두었음.
    // 아래 글제목변경은 글제목을 변경할수있게 해주는 함수가 내장되어있다
    const [글제목, 글제목변경] = useState(['테스트1', '테스트2', '테스트3']);
    const [funCount, setFunCount] = useState(0);
    const posts = '내일의 나에게 도움이 되도록!';

    // 글제목 첫번째 Array 를 바꿔주는 함수
    function aaaa() {
        // State 를 변경할때는 바로 바꾸는게 아니고 복사를 하고 변경을 해야함(React적인 관습이니 이유를 따지지말자)
        // const newArray = 글제목; < 이건 복사가 아니라 공유. 아래처럼 deep copy를 해야함
        const newArray = [...글제목];
        newArray[0] = '0번째가 바뀐다'
        return 글제목변경(newArray);
    }

  return (
    <div className="App">
      <div className="black-nav">
          <div>{posts}</div>
      </div>
        <button onClick={aaaa}>버튼</button>
        <div className='list'>
            <h3>{글제목[0]} <span onClick={() => {setFunCount(funCount + 1)}}>👍</span>  {funCount}</h3>
            <p>2021.05.16</p>
            <hr/>
        </div>
        <div className='list'>
            <h3>{글제목[1]}</h3>
            <p>2021.05.17</p>
            <hr/>
        </div>
        <div className='list'>
            <h3>{글제목[2]}</h3>
            <p>2021.05.18</p>
            <hr/>
        </div>
    </div>
  );
}

export default App;

 

App.css

 

.App {
  text-align: center;
}
body {
  font-family:
  'nanumsquare';
}
.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}
.list {
  margin-top: 30px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}