[React] Input으로 state 변경

🦥 Text 입력값 받아 활용하기

1. input값에 따라 시시각각 값이 업데이트될 state 선언

 

 

---

2. input 태그에 onChange 속성 넣어주기

 

 

3. onChange시, 앞에서 선언한 state 값에 변화 주기

  - e.target.value : input 태그 내 입력될 값의 value

  - setTitleInput : 선언된 state인 titleInput의 값을 e.target.value로 변화시켜 준다

 

---

4. 등록 버튼 눌렀을 시 작동할 함수 작성하기

 

 

  - Line 3 : titleInput이 공백인 경우는 게시글 등록을 하지 않기 위한 코드

  - Line 4 : 기존 게시글 제목들을 담아놓은 state인 title의 값을 복사

  - Line 5 : 복사된 배열에 새로 입력된 게시글 제목 추가

  - Line 6 : 기존의 state를 새로 작성된 tmp로 교체

  - Line 8 ~ 10 : 게시글이 등록됨에 따라 좋아요(LIKE) 버튼 작동을 위해 like 배열에도 기본값 추가

 

---

5. 등록 버튼에 onClick 속성 넣어주기

 

 

 

---

6. 작동 예

 

 

 

---

🐈 등록된 게시글 삭제하기

1. 삭제하기 버튼 눌렀을 때 동작할 함수 작성하기

 

 

  - Line 2 : 해당 게시글의 idx를 받아온다.

  - Line 3 : 기존 게시글 배열을 복사

  - Line 4 : Array의 splice 함수를 이용해 idx번째 게시글 삭제

  - Line 5 : 기존의 title state를 tmp로 교체

 

---

2. 삭제하기 버튼에 onClick 속성 넣어주기

 

 

  - onClick 속성을 이용해 버튼 클릭 시 게시글의 인덱스인 i를 deleteBoard 함수에 전달

  - i는 아래 코드에서 <div> 반복을 위한 map 함수의 매개변수로 등장

 

 

---

3. 작동 예