ref 적용예시

ref 를 통해 인풋박스에 입력된 값을 가져와서 추가해보는 연습을 해보자!

우선은 기초를 잘 다지기위해서는 작업 순서를 항상 생각하고 코딩을 해보는 습관을 들이자.

 

1. 뷰를 만들어주자! 텍스트를 입력할 수 있는 인풋박스를 먼저 생성 

<Input>      <input type="text" ref={this.text} />      <button onClick={this.addBucketList}>추가하기</button>    </Input>

2. ref를 통해 text를 가져올 수 있도록 활용해보자.

// ref 사용을 위해 컴포넌트 내 아래와같이 선언을 해주자. this.text = React.createRef();

3. 인풋박스에 입력한 값은 "[인풋박스 ref].current.value " 형태로 가져올 수 있다.

* 인풋박스에서 입력한 텍스트를 가져와서 리스트를 추가해주기 위한 함수를 만들어줘야한다.    (ref 를 통해 가져온 text값을 리스트에 추가만 하면 끝) addBucketList = () => {    let list = this.state.list;    const new_item = this.text.current.value; // 리액트에서는 concat으로 배열항목을 합쳐주는 게 좋다 // list = list.concat(new_item); // this.setState({list: list}); // 가장 쉽고 추천하는 합치기 방식 →  ...은 배열 안에 있는 항목을 전부 꺼내서 늘어놓는다는 뜻    (스프레드 문법이라고 불러요.) this.setState({list: [...list, new_item]}); }

 

위와같이 함수를 만들어놓고 1번에서 만들어둔 뷰와 연결만 해주면 정상 작동하는걸 볼 수 있다.