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

slide 1 of 18, currently active
slide 2 of 18
slide 3 of 18
slide 4 of 18
slide 5 of 18
slide 6 of 18
slide 7 of 18
slide 8 of 18
slide 9 of 18
slide 10 of 18
slide 11 of 18
slide 12 of 18
slide 13 of 18
slide 14 of 18
slide 15 of 18
slide 16 of 18
slide 17 of 18
slide 18 of 18

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();
  };

(...)

신간 소식 구독하기

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