앞서 Todo-List 프로젝트를 진행하면서 리액트를 사용하는데, 익숙하지가 않아서 많이 버벅거렸다.
그래서 앞으로 간단한 개발을 통해 리액트에 대한 거부감?, 어려움을 극복하기 위해서 직접 개발 하면서 기본기를 탄탄하게 만들 것이다.❗❗

1. 프로젝트 구성🌟

• 저번에 포스팅한 것 처럼 모든 코드들은 내 github에 올릴 예정이다.
• 프로젝트는 create-react-app을 사용하여 프로젝트를 생성했고, 간단한 예제들을 포함한 블로그이기 때문에 App.js 파일에 코드를 구현했다.

2. UI 및 기능 구현

• 위의 그림과 같이 직접 가보았던 맛집들을 정리하기 위해서 게시글을 계속 추가하는 형태의 blog이다.

• Input으로 입력받은 값으로 저장 버튼을 누르면 맛집을 소개하는 게시글을 추가하고, 사용자들이 게시글이 마음에 들면 👍 버튼을 누를 수 있도록 디자인 했다.

• 또한, 게시글이 추가되면 광진구 맛집 아래에 생기지 않고 맨 위부터 추가되도록 했다.

• 열고닫기버튼의 경우에는 아래의 그림과 같이 게시글의 제목, 날짜, 상세 내용을 출력하는 컴포넌트다.

• 이제 맛집을 공유하는 블로그를 만들어 보자.👍

2.1 기능 구현 🔨

• 기능을 구현하기 앞서 고려했던 점은 다음과 같다.🧐

1. 게시글이 많아지면 코드도 많아지는 경우
2. 게시글이 많아지는 경우 반복문을 통해서 생성하면 되는데, 그럼 동일한 👍 버튼을 가지기 때문에 동시에 👍 개수가 올라가는 경우
3. 새로운 게시글을 저장하면 맨 위에서 부터 어떻게 추가할 수 있을까?
4. 열고닫기버튼을 통해 어떻게 컴포넌트를 열었다 닫았다 할 수 있을까?

• 기능을 구현하기 위해 App.js에 다음과 같이 코드를 작성했다.

//App.js
/* esLint-disable */
import React, { useState } from 'react';
import './App.css';

function App() {
  let [맛집, 맛집수정] = useState(['송파구 맛집', '강동구 맛집', '광진구 맛집']);
  let [number, setNumber] = useState([0, 0, 0]); // 
  let [modal, setModal] = useState(false); // 모달창을 켜고 닫는 스위치
  let [맛집넘버, 맛집넘버수정] = useState(0);
  let [입력, 입력수정] = useState('');

  function 맛집추가() {
    let 뉴맛집 = [...맛집];
    let 뉴뉴넘버 = [...number];
    뉴맛집.unshift(입력);
    뉴뉴넘버.unshift(0);
    맛집수정(뉴맛집);
    setNumber(뉴뉴넘버);
  }

  function numberUp(i) {
    let 뉴넘버 = [...number];
    뉴넘버[i] = 뉴넘버[i] + 1;
    setNumber(뉴넘버);
  }

  return (
    <div className="App">
      <div className="navbar">
        Dekay Blog
      </div>
      { 
        맛집.map(function(맛집, i) {
          return (
            <div className="list" key={i}>
              <h3 onClick={ ()=> { 맛집넘버수정(i) } }>{맛집} <span onClick={ ()=>{ numberUp(i) }}>👍</span> {number[i]} </h3>
              <p>2월 17일 발행</p>
              <hr/>
            </div> 
          )
        }) // JSX: for 문
      }

      <div className="publish">
        <input onChange={ (e)=>{ 입력수정(e.target.value) } }/>
        <button onClick={ ()=> { 맛집추가() } }>저장</button>
      </div>

      <button onClick= { ()=>setModal(!modal) }>열고닫기버튼</button>

      {
        modal === true
        ? <Modal 맛집={맛집} 맛집넘버={맛집넘버}/> // ??=?? {작명=전송할state}
        : null
      }
    </div>
  );
}

function Modal(props) {
  return (
    <div className="modal">
      <h2>{ props.맛집[props.맛집넘버] }</h2>
      <p>날짜</p>
      <p>상세 내용</p>
    </div>
  );
}

export default App;

2.1.1 게시글 컴포넌트

• 게시글 컴포넌트는 Javascript의 map 함수를 통해 반복문을 사용했다.

{ 
  맛집.map(function(맛집, i) {
    return (
      <div className="list" key={i}>
        <h3 onClick={ ()=> { 맛집넘버수정(i) } }>{맛집} <span onClick={ ()=>{ numberUp(i) }}>👍</span> {number[i]} </h3>
        <p>2월 17일 발행</p>
        <hr/>
      </div> 
    )
  }) // JSX: for 문
}

• 맛집에는 3개의 데이터가 기본값으로 설정되어 있기 때문에 맛집.map 함수를 통해 3번 반복할 수 있다.

2.1.2 게시글 추가 컴포넌트

• 게시글 추가의 경우 새로운 게시글이 저장되면 맨 위에서부터 저장되도록 구현했다.

let [입력, 입력수정] = useState('');

function 맛집추가() {
  let 뉴맛집 = [...맛집];
  let 뉴뉴넘버 = [...number];
  뉴맛집.unshift(입력);
  뉴뉴넘버.unshift(0);
  맛집수정(뉴맛집);
  setNumber(뉴뉴넘버);
}

<div className="publish">
        <input onChange={ (e)=>{ 입력수정(e.target.value) } }/>
        <button onClick={ ()=> { 맛집추가() } }>저장</button>
      </div>

• Input에 입력된 값을 받아와 입력에 저장하고 맛집추가 함수에서 맛집 데이터에 입력된 값을 저장했다.
• 저장할 때 unshift를 통해 배열 맨 앞에 저장할 수 있다.

2.1.3 👍 버튼

• 반복문을 통해 게시글을 생성했을 때 👍 버튼을 눌렀을 때 동시에 Count 되는 현상이 있었다.

function numberUp(i) {
  let 뉴넘버 = [...number];
  뉴넘버[i] = 뉴넘버[i] + 1;
  setNumber(뉴넘버);
}

• 해결하기 위해서 number라는 변수를 생성하고 numberUp 함수를 통해 각 게시글 마다 다른 number를 출력하도록 구현했다.

2.1.4 열고닫기버튼

• 열고닫기버튼으로 생성한 게시글 중 원하는 게시글에 대한 내용을 출력하도록 구현했다.

<button onClick= { ()=>setModal(!modal) }>열고닫기버튼</button>

{
  modal === true
  ? <Modal 맛집={맛집} 맛집넘버={맛집넘버}/> // ??=?? {작명=전송할state}
  : null
}

function Modal(props) {
  return (
    <div className="modal">
      <h2>{ props.맛집[props.맛집넘버] }</h2>
      <p>날짜</p>
      <p>상세 내용</p>
    </div>
  );
}

• 삼항연산자를 통해 열고닫기버튼을 제어했고, modal이 true이면 게시글 내용을 보여주는 컴포넌트가 출력된다.
• 이때, 맛집넘버 변수를 통해 각 게시글을 클릭하면 클릭한 게시글 내용을 출력하도록 구현했다.

3. 결과

useState만 사용하면서 간단한 블로그를 만들어보니 어떻게 구조가 돌아가는지 헷갈렸던 부분이 모두 이해가 되었다 ㅎㅎ😊😊

많은 구글링을 통해 Modal을 어떻게 보였다 안보였다 하는지 고민하고, 각 게시글에 버튼을 어떻게 구분할지 생각도 했는데 useState를 통해 손쉽게 해결할 수 있었고 왜 사람들이 리액트 리액트하는지 알게됐다 ㅋㅋ.

아직 너무 퀄리티가 낮아보이긴 하지만.. 그래도 이렇게 기능이 구현이 되면 너무 재밌어서 빨리 다음엔 무엇을 만들어볼지 고민이다 ㅎㅎ👍

end