Day34

Day 34

사용사례 (3) : 검색

---

• 요구사항
  1. Emoji 리스트를 보여준다.
  2. 검색을 통해 필터링한다.
  3. emoji를 클릭하면 복사한다.

Context API

---

• Prop drilling : 최상위 컴포넌트에서 최하위 컴포넌트로 데이터를 보내거나 최하위 컴포넌트에서 최상위 컴포넌트의 함수를 사용한다거나 한 최하위 컴포넌트에서 또다른 최하위 컴포넌트로 데이터를 넘겨야 할 때 해당 경로에 있는 모든 component들의 인자에 해당 prop을 넘겨주어야 하는 현상

문제	해결방법

• prop drilling을 해결하기 위한 도구
  • Redux
  • Recoil
  • Mobx
  • Context API : 기본 react library
• Context API 동작 원리

• key값은 절대 겹치지 않는 값으로 넣어줘야 한다.

컴포넌트 연습하기 (7) : Upload

---

• 기본적인 upload 시스템
• drag & drop으로 파일을 업로드 하는 기능을 구현한다.
• 파일 업로드 input은 외형 변경이 불가능하기 때문에 display를 none으로 하고 자식 요소로 들어온 tag를 이용하여 꾸며준다.
• display를 none으로 만들면 해당 요소에 접근할 수 없기 때문에 useRef를 이용해서 해당 요소에 접근한다.
• 만약 파일 업로드 input에 파일이 선택되면 해당 input의 value는 업로드한 파일이 된다.
• 하지만 component에는 파일이 저장되지 않았기 때문에 파일을 저장할 수 있는 상태를 만들어서 업로드된 파일을 이용한다.

• children을 jsx를 반환하는 함수로 만들 수 있다.

• drag&drop을 구현하기 위해서 처리해줘야하는 이벤트
  • handleDragEnter
  • handleDragLeave
  • handleDragOver
  • handleFileDrop

컴포넌트 연습하기 (8) : Badge

---

• 알림이 있을 때 컴포넌트 위에 알림이 얼마나 왔는지 알려주는 컴포넌트