[React] 블로그 글 발행 기능 다루기

그전에 숙제!!

 

 

onChange 를 이용해서

setOnChangeDate안의 데이터 값을 값이 입력 될 때마다 입력해 준다.

이때 input 태그에 value 값을 포함시켜 입력창 위의 값을 컨트롤 해준다(입력후 입력창 비우게 하기)

 

이후 추가 버튼을 누르면

{} 내부의 함수를 콜백하는데

 

이때 중요한것이 함수로 값을 넘겨주어야 한다.

 

onClick 같은 이벤트 핸들러 함수 안에 바로 setState 함수를 넣으면 해당 컴포넌트가 랜더링 되자마자 바로 setState 함수가 실행되어서 그 결가값(undefined)이 onClick에 들어간다.

 

결국 렌더링 과정에서 array이 state 값이 변하게 되면서 리렌더링을 하고 onClick에 다시 setArray()의 결과 값을 넣어주기 위해 setArray 함수를 실행시키게 되고 또 array의 값이 변하는 무한 루프에 빠지게 된다.

 

그리고 위에서 input 태그에 넣어주었던 value 의 값인 onChangeDate 값을 추가 버튼 클릭시 비워주는 역할을

setOnChangeDate(""); 가 해준다.

 

 

 

array를 삭제하려면!!!

 

splice 함수를 사용하면 된다

 

slice() splice 진짜 설명 잘되어있는 블로그가 있어서 내용을 가져와봤다.

 

출처:https://www.daleseo.com/js-array-slice-splice/

 

 

 

 

splice() 를 이용해서!!

 

i번째에 있는 버튼을 클릭하면 해당 위치로부터 하나의 배열을 삭제하라는 코드이다.

당연히 배열을 바꿔줄때는 [...array] 로 참조 변수에 담아줘야 setArray 에서 인식 할 수 있다.

 

이것도 잊지말고 button내부에 넣어주자. 삭제 눌렀는데 상위 onclick 안뜨도록(이벤트 버블링 방지!)

---

응용 하기!

삼항 연산자를 넣어줘서 onChangeData 가 값이 있어야만 버튼이 활성화!!

onChange 가 아니라 input value 에 들어가있는 값이다.

 

return 문 내부에서 if 문을 쓸 수가 없어서 삼항 연산자를 쓰는데 구조를 잘 파악하면 좋을듯 싶다.

 

따봉을 관할하는 loveIt 역시 array 추가한것과 마찬가지로 추가해주면 된다. 초기값은 0!

 

 

 

이 문제는 좀 오래 찾아 봤다. 일단 javascript 에서 date 를 사용하는 법을 알아야 한다.

 

일단 Date 의 기본 사용방법부터 알아보자

 

Date() 기본 사용방법

 

let Date1 = new Date(); //현재 날짜 및 시간

let Date2 = new Date(1991,11,25,3,50); // 1991년 12월 25일 3:50:00 (월은 +1 이 된다)

let Date3 = new Date('2012-05-17 10:20:30'); // 2012년 5월 17일 10:20:30

 

get/set 기본 함수.

날짜 관련 연산도 있는데 그건 밑에 출처를 들어가면 자세하게 나온다!

 

이를 이용해서 dt를 먼저 선언해주고 지금 시간을 구하기 위해 nowTime이라는 변수에 시간을 담았다.

출력하면 위와 같이 나온다.

 

이 값을 저장할 useState 를 선언하고 초기값으로는 nowTime을 넣어 처음 입력되었을때 시간을 저장한다.

 

그리고 역시 마찬가지로

\

값 하나를 추가할 때마다 시간을 saveTime array에 하나씩 추가해 준다.

 

 

그렇게 하면 값이 하나 추가될때마다 시간이 다르게 저장이 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의 11강 입니다.

https://codingapple.com/ 알아야할 핵심내용을 쉽게 설명해주시는 강의 같습니다.

 

date 관련 지식 출처 : [자바스크립트] Date() 기본 사용 방법 (tistory.com)

[자바스크립트] Date() 기본 사용 방법

 

slice 와 splice 출처 :https://www.daleseo.com/js-array-slice-splice/