[4 - 12] Add Form 만들기 (Refs 이용)

 

★inputRef = React.createRef();

리액트에서만 사용될 수 있다. 기존 HTML 자바스크립트 방식은 DOM을 가지고 사용하지만 리액트에서는 DOM을 조작할 수 없기 때문에.

 

1. 최상위 컴포넌트 habits 안에서 자식에게 전달할 콜백함수를 만든다.

handleAdd = name => {}

 

2. 이때 인자로 name을 받아오게 만든다.

그리고 받아온 name을 state에 있는 habits 프로퍼티 안에 name이라는 키값에 전달한다.

 

3. 만들어진 콜백함수 handleAdd를 props "onAdd" 로 자식 컴포넌트 Habits에게 전달한다.

 

4. Habits 컴포넌트에서 다시 자식 컴포넌트 HabitAddfrom에게 props "onAdd"로 전달하기 위해 

다시 한번 콜백함수(handleAdd)를 Habits 컴포넌트 안에서 만들고 그 안에 부모 컴포넌트에게서 받아온 props "onAdd"를 넣어 준다. 받아올 인자로는 name을 설정한다.

 

★name && this.props.onAdd(name) ← name에 아무 데이터가 없지 않다면(즉, 데이터가 있다면) 전달받은 onAdd라는 콜백함수에 인자로 name을 전달한다.