리액트 네이티브를 다루는 기술: 4.3 새 항목 등록하기

Note ≡

앞의 코드에서 Math.max(...todos.map(todo => todo.id))처럼 함수의 인자 부분에서도 spread 연산자 ...를 사용할 수 있습니다. 이 코드는 배열 안의 모든 원소를 순서대로 함수의 인자로 넣어준다는 의미입니다.

todos.map(todo => todo.id)는 할일 항목들의 id를 선택해 새로운 배열을 만듭니다. 결과는 [1, 2, 3]입니다. 이 배열을 spread 연산자를 사용해 Math.max 함수의 인자 부분에 펼쳐주면 Math.max(1, 2, 3)을 연산해 이 중 최댓값인 3을 반환합니다.

추가로 todo 객체의 text 부분이 text: text 형태로 작성되지 않고 text라고만 작성되어 있죠? 이는 단축된 속성명(Shorthand property names)이라는 문법입니다. 현재 text 값을 파라미터로 받아오고 있는데, 이를 그대로 객체의 text 속성으로 사용하겠다는 의미입니다. 즉, text: text와 동일한 코드입니다.

onInsert 함수를 다 작성했으면 해당 함수를 AddTodo 컴포넌트에서 사용해보세요.

components/AddTodo.js

(...)

function AddTodo({onInsert}) {
  const [text, setText] = useState('');

  const onPress = () => {
    onInsert(text);
    setText('');
    Keyboard.dismiss();
  };

(...)

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.