[REACT] input 다루기 2 블로그 글 발행 / 삭제
1. 버튼 누르면 유저가 입력한 글을 글목록에 추가
쌩자바스트립트 : "버튼누르면 유저가 입력한 글 가져와서 그걸로 html 하나 생성해주세요~"
리액트 : "버튼누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요"
(지금 코드가 글제목.map() 이렇게 코드짠 덕분에 글제목 state 개수에 맞게 html이 생성되고있기 때문)
function App (){
let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
let [입력값, 입력값변경] = useState('');
return (
<div>
<input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
<button onClick={()=>{
let copy = [...글제목];
copy.unshift(입력값);
글제목변경(copy)
}}>글발행</button>
</div>
)
}
발행버튼누르면 글제목 state에 유저가 입력한 값을 끼워넣으면 된다.
1. 버튼누르면 일단 글제목 state를 카피하고 (array 형태의 state 조작은 우선 카피부터 하면 된다.- 리액트 상태 관리)
2. 카피한거에 unshift (입력값) 해준다. (array 자료 맨 앞에 자료추가하는 문법)
3. 그리고 state 변경함수 사용
→ 이제 <input>에 뭐 입력하고 발행버튼 누르면 글이 진짜로 발행되는 것 같은 기능이 완성
2. 글마다 삭제버튼과 기능만들기
자바스크립트 방식 : "<div> 하나를 삭제해주세요~"
리액트 방식 : "state에서 글을 삭제해주세요~"
function App (){
let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
let [입력값, 입력값변경] = useState('');
return (
<div>
{
글제목.map(function(a, i){
return (
<div className="list">
<h4>{ 글제목[i] }</h4>
<p>2월 18일 발행</p>
<button onClick={()=>{
let copy = [...글제목];
copy.splice(i, 1);
글제목변경(copy);
}}>삭제</button>
</div>
)
})
}
</div>
)
}
array 자료에서 x번째 데이터를 삭제하고 싶으면
array자료.splice(x, 1) 이라고 사용하면된다.
1. 일단 버튼 누르면 글제목 state 사본 만들기
2. 글제목 state에서 x번째 데이터를 삭제하고 싶으면 splice(x, 1) 사용
응용1. 글에 아무것도 입력하지않고 발행버튼 누르는거 막으려면?
<button onClick={()=> {
if (입력값.trim() === '') {
alert('내용을 입력해주세요!');
return;
}
let copy = [...글제목];
copy.unshift(입력값);
글제목변경(copy)
}}>글발행</button>입력값.trim() === '' → 공백만 입력한 경우까지 방지
alert() → 입력이 없을 때 알림 표시
return → 아래 코드 실행을 막아서 빈 값이 추가되지 않도록 함
응용2. 글을 하나 추가하면 따봉개수 개별적용하던 것도 이상해진다
글이 하나 추가되면 따봉기록할 곳도 하나 더 만들어줘야한다.
<button onClick={()=> {
if (입력값.trim() === '') {
alert('내용을 입력해주세요!');
return;
}
let copy = [...글제목];
copy.unshift(입력값);
글제목변경(copy);
입력값변경('');
let 따봉copy = [...따봉];
따봉copy.unshift(0);
따봉변경(따봉copy)
}}>글발행</button>
따봉 state를 copy해주고, unshift로 맨 앞 array에 추가하였고,
그에 따라 삭제도 같이 되어야 하기 때문에 삭제버튼에도 같이 추가해주었다
<button onClick={()=> {
let copy = [...글제목];
copy.splice(i, 1);
글제목변경(copy);
let 따봉copy = [...따봉];
따봉copy.splice(i, 1);
따봉변경(따봉copy);
}}>삭제</button>
응용3. 날짜데이터는?
2월 17일로 하드코딩된 날짜를 글발행시 현재 날짜로 변경해보자
3-1. 기존의 날짜를 state로 바꿔주고 array에 아무 데이터 담기
let [날짜, 날짜변경] = useState(['2024-02-17', '2025-02-17', '2025-02-23'])
3-2. 날짜 표시 (글 목록에서 보여주기)
<p>{ 날짜[i] } 발행</p>
3-3. 글 발행시 현재 날짜 추가
let 날짜copy = [...날짜];
let today = new Date().toISOString().split('T')[0];
날짜copy.unshift(today);
날짜변경(날짜copy)
* new Date().toISOString().split('T')[0] --- 이 코드는 뭘까?
- new Date()
👉 현재 날짜와 시간이 출력
예) Tue Feb 27 2025 14:30:00 GMT+0900 (KST)
- .toISOString()
👉 날짜를 **ISO 8601 형식(국제 표준)**의 문자열로 변환
예) "2025-02-27T05:30:00.000Z"
📌 "T" 앞에는 날짜(YYYY-MM-DD), 뒤에는 시간(HH:MM:SS.밀리초Z)
- .split('T')
👉 "T" 기준으로 날짜와 시간을 분리해 배열로 반환
예) ["2025-02-27", "05:30:00.000Z"]
- [0]으로 날짜 부분만 가져오기
👉 "2025-02-27"
이제 "YYYY-MM-DD" 형식의 날짜 문자열을 얻을 수 있다
3-4. 글 삭제 시 해당 날짜도 함께 삭제
let 날짜copy = [...날짜];
날짜copy.splice(i, 1);
날짜변경(날짜copy);
출처 : 코딩애플 react 강의