[react]useState사용해서 배열에 값 추가하기. (a.k.a TODOLIST)

·2021년 3월 7일
2

react

목록 보기
1/6
/* eslint-disable no-console */
import React, { useState } from 'react';
import styled from 'styled-components';

const TodoStyle = styled.div`
  display: block;
  padding: 30px;
  border-bottom: 3px dashed darkorange;
`;

const PracticeTodoList = () => {
  const [textValue, setTextValue] = useState('');
  const [enters, setEnters] = useState([]);

  const onChange = e => {
    setTextValue(e.target.value);
  };

  const onCreate = e => {
    setEnters(enters => [...enters, textValue]);
    setTextValue('');
  };

  return (
    <TodoStyle>      
      <h1 className="title">TodoList</h1>
      <input
       name="textValue"
       value={textValue}
       onChange={onChange}
       placeholder="할 일을 입력하세요."
      />
      <button onClick={onCreate} className="todoBtn">
       등록하기
      </button>
      <br />
      <b>:{enters.map(ent => (<div>{ent}/div>))}</b>      
    </TodoStyle>
  );
};

export default PracticeTodoList;
profile
어두운 밤하늘, 밝은 달빛.

2개의 댓글

comment-user-thumbnail
2022년 4월 26일

혹시.. setEnters(enters => [...enters, textValue]); 이렇게 배열에 추가하는것과
setEnters([...enters, textValue]); 이것과 차이가 뭔지 궁금합니다.

답글 달기
comment-user-thumbnail
2023년 1월 12일

감사해용 많은 정보 얻었습니당ㅎㅎ

답글 달기