[코딩애플/React.js] input 태그를 활용한 글 생성, 수정 예제 풀이

이 번 회차는 코딩애플에서 내준 과제에 대한 전체 코드 및 아주 간략한 코드 설명 포스팅입니다.

/* eslint-disable*/

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

function App() {

  let [title, settitle] = useState('부산 우동 맛집');
  let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']);

  let [logo, setlogo] = useState('React Blog');

  let [like, setlike] = useState([0, 0, 0]);

  let [modal, setModal] = useState(false);
  let [putindex, setputIndex] = useState(0)
  let [inputvalue, setInputValue] = useState('')

  function likeBtn(i) {
    let copy = [...like];
    copy[i] = like[i] + 1;
    console.log(copy)
    setlike(copy);
  }

  function changeTitle() {
    settitle("서울 우동 맛집")
    seoulNoddles()
  }

  function seoulNoddles() {
    let copy = [...제목1];
    copy = ["맛있는 서울 우동", "맛없는 서울 우동", "나쁘지않은 서울 우동"];
    제목1변경(copy);
  }

  function arraySort() {
    let array_sort = [...제목1].sort()
    제목1변경(array_sort)
  }

  function modalViewControl(index) {
    setputIndex(index)
    if (modal == true) {
      setModal(false)
    }
    else {
      setModal(true)
    }
  }

  function createContent(input) {
    let add_array = [...제목1]
    add_array.push(input)
    제목1변경(add_array)

    let copy = [...like];
    copy.push(0)
    setlike(copy);
  }

  function deleteContent(value) {
    let delete_array = [...제목1]
    let filter_array = delete_array.filter((element) => element !== value);
    제목1변경(filter_array)
  }

  return (
    <div className="App">
      <div className="black-nav">
        <h4>{logo}</h4>
      </div>
      <h3 style={{ color: 'black', fontSize: '56px' }} onClick={modalViewControl}>{title}</h3>

      <button style={{ marginBottom: "20px" }} onClick={changeTitle}>서울 우동 추천</button>
      <br></br>
      <button style={{ marginBottom: "20px" }} onClick={arraySort} >가나다순 정렬</button>

      {
        제목1.map(function (value, index) {
          return (
            <div className='list' key={index}>
              <h4 onClick={() => modalViewControl(index)}>{value}
                <span onClick={(e) => { e.stopPropagation(); likeBtn(index) }}> / 좋아요 👍</span> {like[index]}
                <button onClick={(e) => { e.stopPropagation(); deleteContent(value) }}> 글 삭제 하기</button>
                <p>2월 17일 발행</p>
              </h4>
            </div>
          )
        })
      }

      <input id="inputTag" onChange={(e) => { setInputValue(e.target.value) }}></input>
      <button onClick={() => { createContent(inputvalue); }}>글 생성</button>
      {
        modal == true ? <ModalUI title_rename={제목1변경} title={제목1[putindex]} color={'skyblue'} modal_title={제목1} content="HI" /> : null
      }

    </div>
  );
}

function ModalUI(props) {
  return (
    <div className='modal' style={{ background: props.color }}>
      <h4>{props.title}</h4>
      <p>{props.content}</p>
      <p>상세내용</p>
      <button onClick={() => props.title_rename(['수정된 맛있는 우동', '수정된 맛없는 우동', '수정된 나쁘지않은 우동'])}>글 수정 버튼</button>
    </div>
  )
}

export default App;

1. 여러 글을 만들기 위해 let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']); 정의
2. 제목1.map() 을 활용한 배열 내 값을 활용한 리스트 컴포넌트 생성 (활용한 함수 설명 X)
3. 글 생성은 button tag -> onClick 이벤트를 활용하여 버튼 클릭 시 createContent() 함수를 호출
4. createContent() 함수 호출 시 inputvalue(제목으로 쓸 value)를 매개변수로 던짐 => inputvalue는 input 태그에서 onChange 이벤트를 호출하여 input 태그에 입력된 value를 setInputValue(inputvalue)를 활용하여 inputvalue를 input 태그에 입력된 value로 set 시킴
5. createContent() 함수에서는 useState 제목1 array를 deep copy하고 배열 push를 통해 생성하고자 하는 글을 배열에 추가 후 set useState를 사용하고 좋아요 기능을 위해 좋아요 관련 array에 push
6. 글 삭제는 글 삭제 버튼 클릭 시 deleteContent() 함수를 호출하고 매개변수는 클릭한 리스트의 제목 값을 value로 던짐
7. deleteContent() 함수에서는 UseState 제목1 array를 deepcopy하고 filter() 함수를 통해 삭제를 위해 클릭한 제목의 값인 리스트를 배열에서 제외 시킨 후 set useState를 사용

 

사실 아주 간단한 내용이지만 매 번 Vanilla.js를 하다가 React.js를 하려니 많이 어색해서 시간도 소요가 꽤 되었고 많이 헤매면서 만들었다 .... 하지만 재밌다.. 그러니 더 열심히 해야지 파이팅 !