HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL/
📝
N일차 배운 것 정리/
📝
29일차 배운 것 정리
📝

29일차 배운 것 정리

목차

목차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번 렌더링 됨
          • notion image
    • 해결 : 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 적용해서 마크업부터 만드시나요? 아니면 css 없이 그냥 기능 구현 먼저 해놓고 css 적용하시나욥?
    • 큰 부분 css 작업 먼저 해놓고 (섹션분리)
    • API 연동 및 기능구현
    • 세부 css