[react] input 데이터 변수에 입력하기, 글 추가기능

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

사용자가 입력하는 데이터 글 발행하기

1. 입력한 데이터를 저장한 저장공간, 상태변수 생성 useState

• inputName: 초기값 빈 문자열 ""로 설정
  - 문자를 입력할 것이기 떄문에 비어있는 저장공간이 필요.
• setInputName : 사용자가 입력하는 데이터로 inputName 데이터를 변경해줄 함수설정

 let [inputName, setInputName] = useState("");

2. 사용자가 input창에 입력하는 데이터로 바꿔주기 : onChange()

• onChange() : 사용자가 입력한 데이터를 갖고와서 input 값을 변경해준다.
• e.target.value : 사용자가 input창에 입력한 값을 갖고온다.
• setInputName(e.target.value) : 입력하는 데이터로 변경해주는 상태변경함수로 사용자가 입력하는 값 e.target.value으로 inputName 상태변수값을 변경해준다.

<div className="input-name">
  <input onChange={(e) => { setInputName(e.target.value);}} />
</div>

3. 발행된 블로그 이름목록을 입력된 데이터를 추가한 목록으로 바꿔주는 함수생성

(버튼 누르면 글 목록에 input창에 입력한 데이터를 추가하기 위한 함수생성)

이미 발행되어있는 블로그 이름 목록을 복사 [...blogName] 갖고와서, 맨 앞에 목록에 입력한 데이터 inputName "새로운 블로그 글 제목을 저장해보자" 추가해주는 함수를 생성한다.

• unshift () : 배열의 맨 앞에 자리에 ()안 요소 추가
• setBlogName() : 블로그이름목록 상태변경함수로 추가된 블로그 이름 목록 blogNames 으로 바꿔준다.
  

 let [blogName, setBlogName] = useState(["코딩학원 추천","온라인 코딩 강의 추천","개발 블로그 추천",]);

 function blogNameChange() {
    let blogNames = [...blogName];
    blogNames.unshift(inputName);
    setBlogName(blogNames);
  }

// blogNames 제목 발행 목록이 이렇게 변경되는 것
=> ["새로운 블로그 글 제목을 저장해보자","코딩학원 추천", "온라인 코딩 강의 추천","개발 블로그 추천"]

4. 버튼을 누르면 글 목록에 imput창에 입력한 데이터를 추가하기

App컴포넌트 내에 생성했던 블로그 이름 목록을 변경해주는 함수 blogNameChange 를 실행하여, 새로운 블로그 글이 추가된 목록으로 변경되게 한다.

• blogNameChange 함수 : 블로그 이름 목록(글발행 목록) 변경해주는 함수
• onClick : 버튼을 클릭하면 해당 함수를 실행

  <button onClick={blogNameChange}>블로그 제목 저장</button>