-
Notifications
You must be signed in to change notification settings - Fork 1
화요일 회의록
Kyungsu Kang edited this page Dec 2, 2020
·
1 revision
- createContext에서 적절한 Provider가 없을 때는 defaultValue를 사용하게끔 수정
→ 잘 만든 Provider 커밋 100개 안 부럽다. (Provider에서 처리할 수 있다는 뜻)
defaultValue 매개변수는 트리 안에서
적절한 Provider를 찾지 못했을 때만 쓰이는 값입니다.
컴포넌트를 독립적으로 테스트할 때 유용한 값입니다.
Provider를 통해 undefined을 값으로 보낸다고 해도
구독 컴포넌트들이 defaultValue 를 읽지는 않는다는 점에 유의하세요.
- Provider에서 자식에게 props로 context 값을 전달 하게끔 수정
- 하위 Provider의 값이 우선시 됨. (test 필요)
Provider 컴포넌트는 value prop을 받아서
이 값을 하위에 있는 컴포넌트에게 전달합니다.
값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다.
Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며,
이 경우 하위 Provider의 값이 우선시됩니다.
- Provider의 value prop이 바뀔 때마다 렌더링 되어야 함
- context 값의 바뀌었는지 여부는 Object.is와 동일한 알고리즘을 사용해 이전 값과 새로운 값을 비교해 측정됩니다.
→ 스택을 이용하여 해당 부분 구현할 예정임
함수형 컴포넌트에서는 useContext를 사용할 수 있기 때문에
render 형식으로 동작하는 것을 지원하지 않아도 될 것 같다.
- Provider가 있을 경우에는 가장 가까운 ? 가장 아랫것의 Provider에서 context value를 가져온다.
- Provider가 없이 consumer만 있는 경우도 고려해야 함
- Consumer의 함수를 가져와 실행시킨 후 결과 값을 현재 노드의 자식에 넣어주는 로직이 필요함
- useContext 내에서 수정 필요
- useContext의 Hook (element)에는 임의의 를 반환하도록 하였다.
- React에서는 반환되는 것이 없으나, 코드 적용을 위해 임의로 적용.
- 이후 수정 예정.
- useContext_id 제거 예정. (기존과 아이디어 변경)
- vRoot에서만 동작하는 것을 전체 범위에서 동작하게 수정해야 한다.
- useContext의 Hook (element)에는 임의의 를 반환하도록 하였다.
- useState
- useReducer
- useEffect
- useContext
-
실제 페이지를 만들어본다.
- 각자 아이디어 말하는데, 아이디어는 거창할 필요가 없다.
- 렌더링이 잘 일어나는 페이지여야 한다.
- HOOK들을 여러 개 사용할 수 있어야 한다. 어떤 HOOK을 사용할 지 미리 말할 것.
- 소외되는 HOOK 친구가 없도록 한다.
- 기왕이면, 이렇게 만든 페이지에서 테스트 코드 작성하면 좋을 것.
- TDD 연습한다고 생각하자.
- 각자 아이디어 말하는데, 아이디어는 거창할 필요가 없다.
-
테스트를 넣는다.
- index file (test용 file)을 여러 개 만들어서 import 해서 돌릴 수 있게 한다.
- jest 사용한다.
- DOM rendering 부분은 render한 객체가 일치하는 지 테스트하면 될 것.
- 가상돔 → 실제 돔으로 렌더링하는 부분.
- HOOKS
- rendering이 되는지. ( getElementById로 값을 읽어서 실제 브라우저에 띄워졌는지까지.)
- 크롱님의 강의 참고.
- useState : useState 결과가 잘 반영되는지.
- useReducer : 결과가 잘 반영되는지.
- useEffect : 결과가 잘 반영되는지.
- 분기가 굉장히 많은데, 3가지 모두 테스트할 수 있도록 한다.
- useContext : 결과가 잘 반영되는지.
- useContext는 파일을 여러 개로 나누어서 값이 전달되는지를 봐야 한다.
- HOOK들을 혼용하였을 때 정상적으로 동작하는지.
- VDOM이 제대로 동작하는지 확인을 해보기 위해, TODOList 만들기
- input 창 + li 여러 개를 추가할 수 있는 것.
- useState로 만들기
- 삭제 로직 (x 클릭 시 삭제가 가능하게.)
- 업데이트 버튼 추가
- useEffect에 [...input.children] 칼럼 배열을 넣어서, 로그를 찍는다.
- 순서 바꾸기 버튼.
- input 창 + li 여러 개를 추가할 수 있는 것.
- root의 effectag의 update 랑 placement 임시 땜빵 처리한 것 처리
- 페이지가 바뀔 때 placement로 되어야 하는데 현재는 update로 처리 되고 있음.
- useContext 다중으로 사용 시 스코프 문제 해결
- createdocumentfragment 시간 날때 적용
- 공식 문서 제작
- 라우팅(라이브러리 적용이 가능한가?)
- 불필요한 파일 삭제
- TEST 코드 작성
- 리펙토링 ( 최종보스 )
추모 게시판
- 잘 가.. 고마웠어.. 벤딩머신이자 바닐라마켓이었던 .. 너..
- 시작은 안좋았지만......잘가.....
- 처신 잘하라구 ㅋㅋ
- 어쩔 수 없었어요. 쟤 말하는 싸가지가, 사람 빡 돌게 하잖아요 - 스카이캐슬