리액트 기초(하나하나 따라해보기) 3편

이제 글 목록을 조금 늘려보자.

 

App.js 파일에 이렇게 코딩을 하자. 7번째줄부터 있는 useState 안에 배열 형식으로 3개의 데이터를 입력하고 a라는 변수에 해당 배열이 대입된다. 따라서 a배열의 0번째 인덱스에는 고양이 간식 추천 이라는 문장이 들어간다.

 

해당 코드는 이렇게 된다. 필요한 사람을 복붙해서 가져가면 된다.

 

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

function App() {
  let post = "쿠키도 배우는 코딩";
  let [a, b] = useState([
    "고양이 간식 추천",
    "강아지 간식 추천",
    "병아리 간식 추천",
  ]);
  return (
    <div className="App">
      <div className="black-nav">
        <h2 style={{ color: "gray", fontSize: "40px" }}>블로그입니당</h2>
      </div>
      <div className="list">
        <h4>글 제목 : {a[0]}</h4>
        <p>9월 20일 발행</p>
      </div>
      <div className="list">
        <h4>글 제목 : {a[1]}</h4>
        <p>9월 20일 발행</p>
      </div>
      <div className="list">
        <h4>글 제목 : {a[2]}</h4>
        <p>9월 20일 발행</p>
      </div>
    </div>
  );
}

export default App;

위 코드를 저장하면 (컨트롤+S) 하게 되면 화면이 이렇게 변한다.

 

이렇게 데이터를 잘 가져오는 것을 확인 할 수 있다.

 

이제 옆에 따봉 버튼을 만들고 해당 버튼을 누를 때마다 좋아요 갯수가 올라가는 화면을 만들어 보자.

 

이 코드중 23번째 줄처럼 onClick 이벤트에 한번 클릭할 때마다 good 이라는 변수를 1씩 늘려주는 듯한 이런 문법으로 쓰면 state 는 변경이 되지 않는다. html은 변경이 가능할 지라도 State 는 변경 불가!

 

따라서 이런식으로 코드롤 고쳐야 한다.

 

설명하자면 13번째 줄에 있는 goodPlus 는 함수 이름이다. 어떤 함수냐면 good 이라는 변수를 변경하겠다는 함수 이름이다. 함수의 기능 정의는 아래 24번째 줄에서 이루어진다. 

 

현재 상태는 good 이라는 변수에 useState(0) 의 0이 들어있는 상태이다. good = 0

 

이후 23번째 줄에서 클릭 이벤트 처리를 통해 goodPlus가 작동하면서 클릭시마다 good 변수에 +1을 추가해준다.

 

8번을 누르니 이렇게 숫자가 올라가는 모습을 확인할 수 있었다.

 

추가 기능으로 이번에는 좋아요 숫자를 내리는 기능을 만들어보자.

 

아래 29번째 코드처럼 이번에는 good 변수에서 -1 해주는 기능을 만들어 주고 X를 누를때마다 이제 숫자가 내려가게 된다.

 

X를 눌러서 숫자를 줄인 모습이다.