10.27.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-1챕터리뷰(2)

[ 새롭게 알게된 것 ]

---

1. react-icons 라이브러리를 알게됨

---

설치방법은 아래와 같음

npm install react-icons --save

사용법은 해당 아이콘 디자인 변수명 그대로 호출해주면 됨

출처:react-icons 공식 Doc

---

 

2. 일반 HTML 태그 외에도 커스텀 컴포넌트 태그를 Component Selector 기능을 사용해 넣을 수 있음

---

정말 놀라움. 아래 예시처럼 특정 커서가 해당 컴포넌트에 있을때 특정 컴포넌트 css를 조작할 수 있음.

/* 컴포넌트 A */
const Remove = styled.div`
  display: flex;
  &:hover {
    color: #ff6b6b;
  }
  display: none;
`;

/* 컴포넌트 B */
const TodoItemBlock = styled.div`
  display: flex;
  &:hover {
    ${Remove} {
      display: initial;
    }
  }
`;

이걸 바로 Component Selector라는 기능이라고 명명함.

---

 

3. 새로운 투두 항목은 토글할 수 있는 open값을 useState를 사용해 상태관리하면 됨을 알게됨

---

function TodoCreate() {
  const [open, setOpen] = useState(false);

  const onToggle = () => setOpen(!open);

  return (
    <>
      {open && (
        <InsertFormPositioner>
          <InsertForm>
            <Input autoFocus placeholder="할 일을 입력 후, Enter 를 누르세요" />
          </InsertForm>
        </InsertFormPositioner>
      )}
      <CircleButton onClick={onToggle} open={open}>
        <MdAdd />
      </CircleButton>
    </>
  );
}

출처: 벨로퍼트와 함께하는 모던 리액트

---