목차
목차1. Day51 -React 4화1. 검색1.1 Emoji List 보여주기1.2 검색을 통한 필터링 기능1.3 Emoji 복사하기2. Context API2-1. Context API란2-2 Todo 예제를 통한 ContextAPI 적용
1. Day51 -React 4화
1. 검색
- 요구사항
Emoji List를 보여준다
검색을 통해 필터링 한다
Emoji를 클릭하면 복사한다
1.1 Emoji List 보여주기
- 컴포넌트 작성
- App
- Header
- SearchBox
- EmojiListItem
- EmojiList
1.2 검색을 통한 필터링 기능
- 검색 keyword 넘기기
- SearchBox → App → Emoji List
- EmojiList에서 filterfilter하기
- keyword의 indexOf로 filter
1.3 Emoji 복사하기
- 내장객체인 navigator의 clipboard.writeText() 메소드로 emoji 복사
2. Context API
2-1. Context API란
props drilling 문제를 해결하기 위해 등장한 API로, [ 최상위 컴포넌트 ↔ 하위컴포넌트 ↔ 멀리 떨어져있는 컴포넌트간 ]의 데이터 전달을 위한 API
- Context Provider와 Context Consumer를 통해 데이터를 전달
- 변경필요 → 이벤트를 통해 Provider 변경 → 반응형으로 연결된 Consumer 들이 전부 리렌더링
- 주의사항
주의무분별한 Context 사용은 렌더링 최적화 관점에서 문제야기주의consumer를 구독하는 컴포넌트의 독립성 저하문제 존재
2-2 Todo 예제를 통한 ContextAPI 적용
- 요구사항
- Header
- Form
- TodoList
- Todo
- 추가, 삭제, 체크 기능
contextAPI
[작업1] 기본적인 컴포넌트 및 디자인 작성
- Task
props: content, complete- Toggle 컴포넌트
- useToggle hooks
- TaskList
- tasks를 Context API로 부터 받아 Task 출력
- TaskForm
- input에 적힌 value를 task에 추가하는 컴포넌트
- useState로 내부의 value 값 관리
[작업2] TaskProvider
- Context 생성하기
- Provider 내부에서 관리하고 싶은 상태를 value값으로 담아 리턴
- Context.Provider 형태로 반환
- Provider 내부에서 상태변경메소드 정의
- addTask
- updateTask
- removeTask
- 편하게 사용하기 위해 useConext hook 사용하여 반환
- useTasks =
useContext(TaskContext)
- 사용
- useContext로 반환된 hooks를 마치 store 처럼 사용 가능
const {tasks} = useTasks()
[작업3] 취소선 및 localStorage
- styled-component 인자로 istoggle 값 넘겨서 처리
- localStorage
- useState와 같은 형식으로 만들어서, useState 대체하기
[기타]
- uuid 라이브러리 적용