4. Create: 할 일 추가하기

강의로 들으시려면 (인프런)한 입 크기로 잘라먹는 리액트 10% 쿠폰 받기 (기간 한정)

기능 흐름 살펴보기 

1. 사용자가 새로운 할 일을 입력합니다. 

2. TodoEditor 컴포넌트에 있는 <추가> 버튼을 클릭합니다. 

3. TodoEditor 컴포넌트는 부모인 App에게 아이템 추가 이벤트가 발생했음을 알리고 사용자가 추가한 할 일 데이터를 전달합니다. 

4. App 컴포넌트는 TodoEditor 컴포넌트에서 받은 데이터를 이용해 새 아이템을 추가한 배열을 만들고 State 변수 todo 값을 업데이트합니다. 

5. TodoEditor 컴포넌트는 자연스러운 사용자 경험을 위해 할 일 입력 폼을 초기화합니다.

아이템 추가 함수 만들기 

① TodoEditor 컴포넌트에서 <추가> 버튼을 클릭하면 호출할 함수 onCreate를 만듭니다. 이 함수는 TodoEdior 컴포넌트에서 사용자가 작성한 할 일 데이터를 받아 매개변수 content에 저장합 니다. 이 데이터를 토대로 새 할 일 아이템 객체를 만들어 newItem에 저장합니다.

② 배열의 스프레드 연산자를 활용해 newItem을 포함한 새 배열을 만들어 State 변수 todo를 업데 이트합니다. 이렇게 작성하면 새롭게 추가된 아이템은 항상 배열의 0번 요소가 됩니다.

① idRef의 현잿값을 새롭게 추가할 할 일 아이템의 id로 지정합니다. 만약 아이템이 처음으로 추가 되는 경우라면 해당 아이템의 id는 3이 됩니다. 

② idRef의 현잿값을 1 늘립니다. 아이템을 추가할 때마다 idRef의 현잿값은 1씩 늘어납니다. 따라서 모든 아이템은 고유한 id를 갖게 됩니다. 참고로 idRef의 초깃값을 3으로 설정한 이유는 앞서 작성한 목 데이터의 id가 0, 1, 2이기 때문입니다.

아이템 추가 함수 호출하기 

① Props 객체를 구조 분해 할당합니다.

① 사용자가 입력 폼에 입력한 데이터를 저장할 State 변수 content를 만듭니다. 

② 입력 폼의 onChange 이벤트 핸들러 onChangeContent를 만듭니다. 

③ 입력 폼의 value 속성으로 content 값을 설정하고, 이벤트 핸들러로 onChangeContent를 설정 합니다.

① <추가> 버튼에 대한 이벤트 핸들러 onSubmit을 생성합니다. onSubmit은 함수 onCreate를 호출 하고 인수로 content의 값을 전달합니다. 

② 버튼 클릭 이벤트 핸들러로 함수 onSubmit을 설정합니다.

Create 완성도 높이기 

빈 입력 방지하기 

① 할 일 입력 폼을 제어할 객체 inputRef를 생성합니다. 

② 함수 onSubmit은 현재 content 값이 빈 문자열이면, inputRef가 현잿값(current)으로 저장한 요소에 포커스하고 종료합니다.

③ 할 일 입력 폼의 ref에 inputRef를 설정합니다. 이제 inputRef는 현잿값으로 이 요소를 저장합니다.

아이템 추가 후 입력 폼 초기화하기

① 함수 setContent를 호출해 인수로 빈 문자열을 전달합니다. 그러면 새 아이템을 추가하고 난 후, content 값은 빈 문자열이 되고 입력 폼 역시 초기화됩니다.

<Enter> 키를 눌러 아이템 추가하기

① 함수 onKeyDown은 사용자가 <Enter> 키를 눌렀을 때 호출할 이벤트 핸들러입니다. e.keyCode 에는 현재 사용자가 누른 키보드의 키가 숫자로 변환되어 저장되어 있는데, 13은 <Enter> 키를 의미합니다. 따라서 e.keyCode가 13이면 함수 onSubmit을 호출합니다. 

② 입력 폼의 키 입력 이벤트 핸들러를 함수 onKeyDown으로 설정합니다.