목차
목차1. 고양이 사진첩 과제0. 과제 시작 전, 각 컴포넌트가 자신의 setState를 독립적으로 가지도록 리팩토링각 컴포넌트 별 State 정리Todo2. setState 최적화2.1 state 변경이 있을 때, 변경된 컴포넌트만 update2-2. state의 변경여부 체크 하기 (참고)2-3 State의 정합성, validation Check3. 커피챗3-1.Headimg-map, Wave를 통한 웹 접근성 및 웹 지표 점검하기3-2. state 관리에 대한 이야기들3-3. 토글처리3-4. 개발방식
1. 고양이 사진첩 과제
0. 과제 시작 전, 각 컴포넌트가 자신의 setState를 독립적으로 가지도록 리팩토링
기존구조가 가지는 문제점- App이 render이후 4개의 컴포넌트가 mount 함수안에서 호출 되는 구조이기 때문에, setState()에서 해당 컴포넌트를 참조할 수가 없다.
- 따라서 App이 변경된 state에 따라 컴포넌트들을 조율할 수 없다
변경후- App 이 render를 담당하지 않고, 각각의 컴포넌트가 직접 root Element에 추가하여 렌더하도록 변경
- App은 state를 관리하고, data를 fetch해와서 내려주는 용도로 사용
각 컴포넌트 별 State 정리
App : { isRoot:
boolean, isLoading:boolean, nodeList: node[],
selectedImageUrl: null || string, visitedNodeList: node[] }
node: { id:number, name: string, type: string, parent: null || id,
filePath: null}Loading: { isLoading:
boolean }BreadCrumb: { visitedNodeList:
node[] } NodeList: { isRoot:
boolean, nodeList: node[] }Todo
1. State의 Validation 처리
지금 구현된 코드에서는 state에 대한 정합성 체크를 전혀 하지 않는데, 이 부분을 보충해주세요.
컴포넌트별로 올바르지 않은 state를 넣으면 오류가 발생하도록 해주세요.
2. setState 최적화하여, 변경된 부분만 rendering 처리
각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항이 있을 때만 render 함수를 호출하도록 최적화를 해봅니다.
3. 백 스페이스 키를 통해 이전 경로 이동하도록 설정
루트 탐색 중이 아닌 경우, 백스페이스 키를 눌렀을 때 이전 경로로 이동하도록 만들어봅니다.
2. setState 최적화
2.1 state 변경이 있을 때, 변경된 컴포넌트만 update
각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항이 있을 때만 render 함수를 호출하도록 최적화를 해봅니다.
- property에 따라, 해당 property를 state로 가지는 component를 update 해줌
문제: 한 개의 컴포넌트의 여러 property가 동시에 변경될 때, 각각 update를 진행하며 여러번 리렌더링 됨- 폴더 이동으로 NodeList의 ‘isRoot’와 ‘nodelist’ 상태가 변하며 2번 렌더링 됨
해결: Map을 통해, 컴포넌트별 업데이트 해야하는 property를 모아 둔 후, 한 번에 update를 진행하도록 함
2-2. state의 변경여부 체크 하기 (참고)
각 컴포넌트의 setState를 최적화하여 이전 상태와 비교해서 변경사항이 있을 때만 render 함수를 호출하도록 최적화를 해봅니다.
state의 변화가 없을 때에는, 2-1의 로직을 실행할 필요가 없다. 따라서 state의 변화가 있는지 체크하여야 함
isHaveAnyChange (object, object) ⇒ boolean 기존State와 변화가 일어난 State를 받아, 변화가 하나라도 있다면 true, 없다면 false 리턴
isSameValue (any, any) ⇒ boolean두 개의 value 을 받아, 같은 value인지 여부를 리턴, value가 null 혹은 배열 혹은 객체 인지 여부에 따라 각각의 util 검사함수를 통해 검사 진행
isSameArr (arr, arr ) ⇒ boolean두개의 배열을 받아, 같은 값을 가지고 있는지 여부를 리턴
isSameObj (object, object) ⇒ boolean두개의 객체를 받아, 같은 key와 같은 값을 가지고 있는지 여부를 리턴 단, property의 순서가 달라도, key와 value가 같다면 true를 리턴함
2-3 State의 정합성, validation Check
컴포넌트별로 올바르지 않은 state를 넣으면 오류가 발생하도록 해주세요.
변경이 요구된 newState가 각 컴포넌트 별로 정의된 state에 부합하는지 확인
VALID_TYPE_OF_STATE object- 존재하는 state의 올바른 Type을 배열형식으로 작성
- 여러타입이 가능할 경우, 해당 배열의 요소로 추가
- ex) selectedImageUrl: ["String", "Null"]
isValidState (component, state) ⇒ boolean변경이 발생한 컴포넌트와 변경된 상태를 인자로 받아, state 포함여부 및 type 체크 진행 후 결과를 반환한다.
- state가 null 일 때 false
- 해당 컴포넌트에 존재하지 않는 state일 때 false
- state의 type이
VALID_TYPE_OF_STATE에 명시한 type과 다를 때
- 고민사항
-
고민: isValidState의 위치 고민 1번: 각 컴포넌트의 setState 부분에 위치- 한 줄의 코드로 모든 컴포넌트 검사가능
2번: App에서 하위 컴포넌트들의 setState를 진행할 때, 검사- 모든 setState에 대한 처리 가능
결정1번: 2번으로 할 경우, 해당 컴포넌트 내에서 setState가 호출되었을 때 처리할 수 없기 때문
3. 커피챗
3-1.Headimg-map, Wave를 통한 웹 접근성 및 웹 지표 점검하기
- 채용시에도 wave를 통해, 해당 서비스 사이트의 상태를 점검할 수 있다. (링크)
- front가 얼마나 신경쓰고 있는지 확인할 수 있다
- toss의 경우 에러 많이 있긴하지만, heading map들 보면 깔끔하게 잘되어 있다.
3-2. state 관리에 대한 이야기들
- ContextAPI + reactQuery의 조합
- reactQuery: server로 부터 fetch하는 data 관리
- reactQuery에서는 key가 url과 연결되기 때문에, key를 관리하는 것이 정말 중요하다. key는 unique하게 사용하여야한다.
- ContextAPI: client에서 로그인,인증관련, 테마색상 관련 상태 관리
3-3. 토글처리
- state 있을 때, toggle만 관리 하는 Map[] or array[] 만들고, onClick(id) 넘겨서 해당 toggle state를 변경해주고, 이를 UI가 다시 반영하는 식으로 구현가능
3-4. 개발방식
- 기동님
- 생각없이 페이지를 쭈우우욱 만든다.
- 어느정도 기능 및 동작확인
- 공통부분 쪼개거나, 컴포넌트 단위로 세분화한다
- 질문
- 큰 부분 css 작업 먼저 해놓고 (섹션분리)
- API 연동 및 기능구현
- 세부 css
기동님 디자인 시안 딱 받으면, 먼저 css 적용해서 마크업부터 만드시나요? 아니면 css 없이 그냥 기능 구현 먼저 해놓고 css 적용하시나욥?