리액트 인풋 Event 파헤쳐보자!

클라이언트가 입력한 값을 받아올 수 있는 인풋박스 만들기

> 클래스형 컴포넌트라면 constructor안에 this.text = React.createRef(); Ref변수 만들기

> <input type="text" ref={this.text} /> 인풋 박스안에 ref 달아주기

> Ref 값(인풋의 value값) 가져와서 state 업데이트 해주기 여기선 함수를 만들어 주는게 좋다(참고로 constructor 밖에선 const 필요)

> setState + 스프레드문법으로 state 안의 배열에 새로운 배열을 추가 함으로써 버킷리스트 추가 가능

 

 

스프레드 문법 > [...배열이름, 추가하고 싶은 배열이나 요소]  이렇게 써주면 배열값을 하나하나 나열하고 거기에 요소를 더 해줄주어 새로운 배열을 만들 수 있다

class App extends React.Component {
  constructor(props) {
    super(props);
    // App 컴포넌트의 state를 정의해줍니다.
    this.state = {
      list: ["영화관 가기", "매일 책읽기", "수영 배우기"],
    };

    this.text = React.createRef();
  }

  addBucketList = () => {
    let list = this.state.list; //state는 변수에 넣을 수 있음
    const new_item = this.text.current.value; //가져온 text 값을 담을 변수

    this.setState({ list: [...list, new_item] }); //이제 기존의 스테이트에 setState로 배열을 추가 해준다
    //스프레드 문법 [...배열이름, c추가할 배열 ] ...을 쓰면 그 배열의 요소가 하나하나 다들어옴 여기에 새로 추가할 거 +
  };

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {
    return (
      <div className="App">
        <Container>
          <Title>내 버킷리스트</Title>
          <Line />
          {/* 컴포넌트를 넣어줍니다. */}
          {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
          <BucketList list={this.state.list} />
        </Container>
        <Input>
          <input type="text" ref={this.text} />
          <button onClick={this.addBucketList}>추가하기</button>
        </Input>
      </div>
    );
  }
}