[ 스파르타 / TIL ] 내일배움캠프 #41

Font awsome을 styled componant에서 쓰는 방법

---

도전 1

아래와 같이 코드를 적어 주었지만 페이지 아무것도 뜨지 않는다.

 

Calendar.js

// Calendar.js
import styled from 'styled-components';

const PencilIcon = () => {
  return <i className='fas-fa-solid fa-pencil'></i>;
};
export const PencilIconnDisplay = styled(PencilIcon)`
  font-size: 20px;
`;

// Calendar.jsx
<PencilIconnDisplay />

 

 

도전 2

연필 아이콘이 출력된다!

// Calendar.jsx
import { faPencil } from '@fortawesome/free-solid-svg-icons';
<PencilIcon icon={faPencil} />

// Calendar.js
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export const PencilIcon = styled(FontAwesomeIcon)`
  font-size: 1.2rem;
  cursor: pointer;
`;

 

 

submit 버튼을 눌렀을 시 입력창 빈칸으로 만들어주기

---

setInput("")을 해주어도 입력한 값이 그대로 남아있었다. input을 리셋시키기 위해서는 input tag안에 value={input}을 설정해주어야 한다. 

 

const [item, setItem] = useState('');

<ItemInput id='item' placeholder='입력해주세요.' onChange={itemChangeHandler} value={item} />

 const itemSubmitHandler = (event) => {
    event.preventDefault();
    const newItem = {
      id: uuidv4(),
      item,
      date,
      price: cost,
      isChecked: false,
      modify: false,
    };
    dispatch(addList(newItem));
    setItem('');
    setCost('');
  };