[React] 블로그 제작 4 - input

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

// 이벤트 핸들러 부착 후, 현재 입력된 값 출력하기
<input onChange={(e)=>{ console.log(e.target.value) }}/>

• 주로 변수 명은 e로 사용함
• e.target : 현재 이벤트가 발생한 곳 알려줌
• e.preventDefault() : 이벤트 기본 동작 막아주기
• e.stopPropagation() : 이벤트 버블링 막아주기 (이벤트가 상위 div로 퍼지는 현상)

 

 

 

 

사용자가 input에 입력한 데이터 저장하기

1. state 하나 생성해주고
2. 이벤트가 발생할 때마다 e.target.value를 state에 갱신

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

 

 

 

 

 

 

실습 요구사항

1. 버튼을 누르면 유저가 입력한 글을 글 목록에 추가
2. 글마다 삭제버튼 + 기능 구현
3. 내용이 없는 글은 발행하지 않도록
4. 글을 하나 추가하면 좋아요 state도 그에 맞게 수정
5. 날짜 데이터 추가하기

/* eslint-disable */

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

function App() {

  let [titles, setTitles] = useState(['크로스핏 컴백한 날', '운동하는데 첫 눈 왔당', '서울 가야하는 이유 + 1']);
  
  // 버튼 클릭시 좋아요 +1 => 자주 변경될 것이기 때문에 state 사용
  let [likes, setLikes] = useState([0, 0, 0]);
  
  // 날짜 정보
  let today = new Date();
  let month = today.getMonth() + 1;
  let date = today.getDate();
  

  // UI의 현재 상태
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);

  function updateTitle1() {
      let copy = [...titles];
      copy[0] = '제목 변경 완.';
      setTitles(copy);
  }

  let [inputData, setInputData] = useState('');



  return (
    <div className="App">
     
     (...생략)
     
      {
        // i는 0부터 1씩 증가하는 수
        titles.map((title, i)=>{
          return (
          <div className="list" key={i}>
           
           (...생략)
           
            {/* 5. 날짜 데이터 반영해주기 */}
            <p>{ month }월 { date }일 작성됨</p>
            
            {/* 2. 삭제 버튼과 기능 구현 */}
            <button onClick={()=>{
              let copy = [...titles]
              copy.splice(i, 1)
              setTitles(copy)
            }}>delete</button>
          </div>
          )
        })
      }

      <input onChange={(e)=>{
        setInputData(e.target.value)}}>
      </input>
      <button onClick={()=>{
        // 3. 빈 문자열일때는 발행하지 못하도록 alert
        if (inputData === '') {
          alert('내용을 입력해 주세요!')
          return
        }
        // 4. 좋아요 숫자 처리해주기
        let likes_copy = [...likes];
        likes_copy.unshift(0)
       setLikes(likes_copy)

        // 1. 제목 추가해주기
        let copy = [...titles]
        copy.unshift(inputData)
        setTitles(copy)
        }}>등록</button>

    </div>
  );
}

export default App;

실행 결과)

 

 

 

 

 

 

 

작년 버스 정류장에서 만난 귀욤씨

뷰 하다가 리액트,,  좀 eeeeeez하네 ㅎ 리액트가 약간 더 까다로운 느낌이 있다!

JS 공부 깊게 할 필요가 있는듯,,ㅎ