[React] input - 추가 응용문제 풀어보기!!

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


function App() {
 
  let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천'])
  let [date, changeDate] = useState('2월 17일 발행')
  let [cnt, plusCnt] = useState([0,0,0])
  let [modal, setModal] = useState(false);
  let [number, changeNumber] = useState(0);
  let [input입력, setinput입력] = useState('');

  const del = (e)=>{
    let copy = [...title];

    let find = copy.indexOf(title);
    console.log(e)
    if(find != -1){
      copy.slice(find,1);
      changeTitle(copy);
    }
  };

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBlog</h4>
      </div>
      {
        title.map((a,i)=>{ 
          let copy = [...cnt]

          return ( 
            <div className='list' key={i}> 
              <h3>{title[i]} 
              <span onClick={(e)=>{ e.stopPropagation() 
                copy[i] = cnt[i]+1
                plusCnt(copy)
              }}> ♥</span> {copy[i]}</h3>
              <p>{date}</p>
              <button onClick={()=>{
                let copy = [...title];
         		
                console.log(copy.pop(copy[i])); // 배열 삭제 = splice(i,1)
                changeTitle(copy);
              }}>삭제</button>
            </div>
          )

        })     
      }

      <input onChange={(e)=>{
        setinput입력(e.target.value)
      }}/><button onClick={()=>{

        let copy = [...title]
        copy.push(input입력)  //배열 삽입 = unshift(input입력)
        changeTitle(copy)
        
      }}>글발행</button>

  
    </div>
  );
}

export default App;

<input>에 입력한 값 가져오기

<input onChange={(e)=>{ console.log(e.target.value) }}/>
<!-- 
onChange = onInput : 사용자가 입력할 때 마다 이벤트 발생
e.target.value : <input>에 입력한 값 가져오기

파라미터(e)를 추가하면 이벤트 관련 기능 사용 가능
ex) e.target : 현재 이벤트가 발생한 곳 알려줌
e.preventDefault() 이벤트 기본 동작을 막아줌
e.stopPropagation() 이벤트 버블링(상위 html로 이벤트가 퍼지는 현상)도 막아줌 
=> 하트 누를 때마다 모달창 뜨는 것 방지
-->

input 에 입력한 데이터 저장하기

- state / 변수에 저장해서 사용

 

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

function App() {
  let [title, changeTitle] = useState(['남자코트 추천', '강남 맛집 추천', '국내 여행지 추천'])
  let [date, changeDate] = useState('2월 17일 발행')
  let [cnt, plusCnt] = useState([0,0,0])
  let [modal, setModal] = useState(false);
  let [number, changeNumber] = useState(0);
  let [input입력, setinput입력] = useState('');

  [1,2,3].map(function(a){ //[]의 길이만큼 return 반복, a : array[i]의 값
    return '1233211'
  })

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>ReactBlog</h4>
      </div>
      {
        title.map(function(a, i){ 
          let copy = [...cnt]
          return ( 
            <div className='list' key={i}> 
              <h3 onClick={()=>{setModal(!modal); changeNumber(i)}}>{title[i]} <span 
              onClick={(e)=>{ e.stopPropagation() 
                // 하트 누를 시 모달창 같이 열림 : 상위 html로 이벤트가 퍼지는 이벤트 버블링을 막기 위해 e.stopPropagation() 사용 
                copy[i] = cnt[i]+1
                plusCnt(copy)
              }}> ♥</span> {copy[i]}</h3>
              <p>{date}</p>
            </div>
          )
        })     
      }

      <input  onChange={(e)=>{
        setinput입력(e.target.value)
        console.log(input입력)
        }}/>

      {
        modal == true ? <Modal color={'yellow'} title={title} number={number}/> : null
      }
    </div>
  );
}
function Modal(props){                
  return(
    <div className='modal' style={{backgroundColor : props.color}}>
      <h4>{props.title[props.number]}</h4>    
      <p>날짜</p>
      <p>상세내용</p>
      <button>글수정</button>
    </div>
  )
}
export default App;

 

응용1. 글에 아무것도 입력안하고 발행버튼 누르는거 막으려면? 

유저의 의도치않은 행동을 막는 코드도 많이 짜야 안전한 사이트가 됩니다. 

 

응용2. 글을 하나 추가하면 따봉갯수 개별적용하던 것도 이상해질 수 있습니다.

어떻게 해결하면 될까요? 

아마 글이 하나 추가되면 따봉기록할 곳도 하나 더 만들어줘야할듯요.

 

응용3. 날짜데이터는?

state에 글만 저장되어있는데 날짜같은 것도 저장해두고 보여주는 식으로 하면 재밌을 것 같군요. 

자바스크립트로 현재 날짜같은 것도 출력해볼 수 있어서 글 발행시 그런 기능을 더해줄 수도 있겠네요.