9-3. TodoInsert 만들기

이제 할일 목록을 추가해주는 컴포넌트 TodoInsert를 생성하겠습니다.

TodoInsert.js 생성

// TodoInsert.js
import { MdAdd } from 'react-icons/md';
import './TodoInsert.css'; // 아직 css 미기입상태

const TodoInsert = () => {
    return (
        <form className='TodoInsert'>
            <input placeholder='할 일을 입력하세요' />
            <button type="submit">
                <MdAdd/>
            </button>
            
        </form>
    );
};

export default TodoInsert;

여기에서는 9-1에서 설치한 react-icons를 사용해보겠습니다.

// react-icons 사용부분
import { MdAdd } from 'react-icons/md';
...
	<MdAdd/>
...

App.js를 통해 렌더링하기

// App.js
import './reset.css';

import TodoInsert from "./components/TodoInsert";
import TodoTemplate from "./components/TodoTemplate";



function App() {
  return (
    <div>
      <TodoTemplate>
        <TodoInsert></TodoInsert>
      </TodoTemplate>
      
    </div>
  );
}

export default App;

출력화면

TodoInsert.css로 스타일 주기

.TodoInsert {
    display: flex;
    background-color: #384046;
    
}

.TodoInsert input {
    background-color: #384046;
    padding: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
    color: white;
    flex-grow: 1;
}
.TodoInsert input::placeholder {
    color: #dee2e6;
}

.TodoInsert button {
    background-color: #868e96;
    color: white;
    padding: 0 1rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.TodoInsert button:hover{
	background-color: #adb5bd;
    transition: 0.1s background-color ease-in;    
}

마지막 하단부에 .TodoInsert button:hover의 의미는
button에 hover(마우스를 button 위에 올리는것)됬을 때

transition:
0.1s(0.1초 동안 변화된다),
background-color(백그라운드컬러가 변경됬을때)
ease-in(ease-in방식으로)

즉,
TodoInsert button에 마우스를 갓다 대면 0.1초 안에 ease-in 방식으로 background 컬러가 #adb5bd 색상으로 변경된다는 의미입니다.

출력화면