💡 들어가며

이번에는 좋아요 버튼과 좋아요 수를 나타내는 UI, 블로그 글 제목을 가나다순으로 정렬하는 UI를 만들어 볼 것이다. 자세한 이론 설명은 아래 포스팅을 참고하자.

✨Props, State (23.09.06-07)✨

💜 기능 구현하기

App.js

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

function App() {

  let post = '힘들지 않아 거친 정글 속에 뛰어든 건 나니까,,,, 암 오케이,,,, ';
  let [글제목, 글제목변경] = useState(['오늘의 일기 📖', '내일의 일기 📘', '모레의 일기 📒']);
  let [좋아요, 좋아요변경] = useState(0);

  return (
    <div className="App">
      <div className='blue-nav'>
        <h4>현의 블로그</h4>
      </div>

      <button onClick={()=>{
        let sort = [...글제목];
        sort.sort();
        글제목변경(sort);
      }
      }>가나다순 정렬</button>

      <button onClick={()=>{
        let copy = [...글제목];
        copy[0] = '오늘의 일기 📙';
        글제목변경(copy);
      }}>글 수정</button>

      <div className='list'>
        <h4>{글제목[0]} <span onClick={()=>{ 좋아요변경(좋아요+1) }}>💜</span>
        {좋아요} </h4>
        <p>1월 8일 발행</p>
      </div>

      <div className='list'>
        <h4>{글제목[1]}
        </h4>
        <p>1월 9일 발행</p>
      </div>

      <div className='list'>
        <h4>{글제목[2]}</h4>
        <p>1월 10일 발행</p>
      </div>

      <h4>{ post }</h4>
    </div>
  );
}

export default App;

👀 결과적으로

해당 코드를 작성하여 구현한 화면은 아래와 같다.

버튼 클릭 시 글 제목이 수정되고, 가나다순으로 정렬되는 모습이다. 정렬 시에는 sort() 함수를 사용하였다. 이 과정을 통해 변수의 개념과 얕은 복사와 깊은 복사에 대한 이해가 필요하다는 것을 또 한번 느꼈다.

배열 복사에 대해 알아보시겠습니까? 😎