[React] 2. State로 title, like 구현

🎈 블로그 레이아웃 해보기

저번 포스팅에서 nav 바를 만들었고, 이제는 블로그 레이아웃을 App.js 에 만들것이다

App.js

function App() {
  return (
    <div className="App">
    <div className="black-nav">
        <div>Blog</div>
      </div>
      <div className="list">
        <h4>글제목</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>  
  );
  }

지금은 하드코딩 해놓았지만
블로그 post의 제목, 발행일을 어떤 방식으로 입력하는게 좋을까?
title, date이라는 변수를 만들어 데이터바인딩 해도 되겠지만 리액트에서 변수를 유동적으로 사용할 때는 state를 사용하는 것이 편리하다

🖤 state란?

리액트에서의 일반 변수대신 자료를 저장해둘 수 있는 방식

import {useState} from 'react' 
let [a,setA]= useState('초깃값') 

이를 통해 a의 값을 useState에 저장하고 setA 함수로 a 값을 변경할 수 있다

🤔 변수가 아니라 state를 사용하는 이유는?

• UI 기능 개발도 매우 편리해지고 부드럽게 동작한다

state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해주기 때문

예를 들어

function App(){
  let post = '강남 우동 맛집'

  return (
    <h4>{ post }</h4>
  )
}

이렇게 데이터 바인딩을 해놓았는데 post 변수가 변경되었을 때 html 에 반영되게 하기 위해서는 html 내부를 바꾸는 innerHtml로 귀찮게 코드를 작성해야 한다!
하지만 리액트에서는 html 의 변수 변경을 쉽게 해주기 위한 state를 사용할 수 있다

function App(){
  let [post,usePost] = useState( '강남 우동 맛집' )

  return (
    <h4>{ post }</h4>
  )
}

➡ html에 개입 안해도 자동으로 state는 변경이 일어나면 state가 포함된 html을 자동으로 재렌더링 해준다

😊 그렇기 때문에 바뀌지 않는 데이터, html에 표기없는 데이터는 state로 만들 필요없고 그냥 변수에 저장해도 된당

값이 변경될 때마다 렌더링이 필요한 변수들만 state를 사용하면 편리하다!
ex) 상품명, 글제목, 가격

🖤 state로 기능 구현

위에서 말한 state를 사용하여 코드를 작성해보겠다

• 글 제목 작성
• 좋아요 버튼 구현

function App() {
  let [title,setTitle]=useState(['남자 코드 추천','강남 우동 맛집','파이썬 독학'])
let [like,setLike]=useState(0)
  return (
    <div className="App">
    <div className="black-nav">
        <div>Blog</div>
      </div>
      <div className="list">
        <h4>{title[0]} <span onClick={()=>setLike(like+1)}>👍</span>{like} </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
    
  );
}

우선 첫번째 글만 만들었고, state를 배열로 만들어서 첫번째 제목인 '남자 코트 추천'을 데이터 바인딩한다
{title[0]}

그리고 클릭하면 수가 증가하는 좋아요 버튼을 구현했다

onclick 속성을 사용하여 like 변경함수로 like state를 1 증가시킬 수 있다

📢 잠깐 onclick에 대해 설명하자면

일반 html 파일에서는 아래처럼 작성하면 되지만

<div onclick="실행할 자바스크립트~~~">

JSX에서는 이렇게 한다 🔽

• Click이 대문자
• {} 중괄호 사용
• 그냥 코드가 아니라 함수를 넣어야 잘 동작

<div onClick={실행할함수}>

예를들어

• 이렇게 함수를 만들어서 onClick 중괄호 안에 함수명을 입력해도 되고

function handleLike(){
setLike(like+1)
}
onClick={handleLike}

• 중괄호 안에서 함수를 작성해도 되고
  (함수명은 다시 사용되지 않는 경우 생략해도 된다)

onClick={function handleLike(){
setLike(like+1)
}}

• 이렇게 function과 중괄호를 생략한 버전인 narrow function으로 작성해도 된다

onClick={()=>setLike(like+1)}