[TIL] 엘리스 SW 엔지니어 트랙 Day 058

📖 오늘 배운 내용 - 2022.01.12

• 상태 관리
• Prop Drilling
• Flux Pattern
• useState, useRef, useContext, useReducer

 

📝 상태 관리

[React] 상태관리란 무엇인가?

 

📝 상태 관리 기술이 해결하는 문제들

📕 데이터 캐싱과 재활용

• SPA에서 페이지 로딩 시마다 모든 데이터를 로딩한다면, 사용자 경험 측면에서 MPA를 크게 넘어서기 힘들다.
• 오히려 네트워크 요청 수가 많아져 더 느릴 수도 있다.
• 변경이 잦은 데이터가 아니라면, 데이터를 캐싱하고 재활용한다.
• 변경이 잦은 데이터라면 상태 관리 기술이 적합하지 않을 수 있다.
• 변경이 잦다면, 데이터의 변경 시점을 파악해 최적화한다.
  • ex) 일정 시간마다 서버에 저장, 타이핑 5초 후 서버에 저장

 

📕 Prop Drilling

• 컴포넌트가 복잡해지는 경우, 상위 부모와 자식 컴포넌트 간의 깊이가 커진다.
• 최하단의 자식 컴포넌트가 데이터를 쓰기 위해 최상위 컴포넌트부터 데이터를 보내야 하는 상황이 발생한다.
• Context API 등을 활용하여 필요한 컴포넌트에서 데이터를 가져올 수 있다.
• 컴포넌트 간의 결합성을 낮춘다.

 

📝 Flux Pattern

[React] Flux Pattern

 

📝 useState, useRef, useContext, useReducer

• 외부 라이브러리 없이 React가 제공하는 훅 만으로 상태 관리를 구현하기 위해 사용한다.
• 함수형 컴포넌트에 상태를 두고, 여러 컴포넌트 간 데이터와 데이터 변경 함수를 공유하는 방식으로 상태를 관리하게 된다.

 

📕 useState

• 단순한 하나의 상태를 관리하기에 적합하다.
• const [ state, setState ] = useState(initState | initFn)
• state가 바뀌면, state를 사용하는 컴포넌트를 리렌더한다.
• useEffect와 함께 state에 반응하는 훅을 구축할 수 있다.

 

📕 useRef

• 상태가 바뀌어도 리렌더링하지 않는 상태를 정의한다.
• 즉, 상태가 UI의 변경과 관계없을 때 사용한다.
  • ex) setTimeout의 timerId 저장
• uncontrolled component의 상태를 조작하는 등, 리렌더링을 최소화하는 상태 관리에 사용된다.

 

📕 useContext

• 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용
• 부분적인 컴포넌트들의 상태 관리, 전체 앱의 상태 관리를 모두 구현한다.
• Context Provider 안에서 렌더링 되는 컴포넌트는 useContext를 이용해 깊이 nested 된 컴포넌트라도 바로 context value를 가져온다.
• context value가 바뀌면 내부 컴포넌트는 모두 리렌더링 된다.

 

📕 useReducer

• useState보다 복잡한 상태를 다룰 때 사용
• 별도의 라이브러리 없이 flux pattern에 기반한 상태 관리를 구현
• const [state, dispatch] = useReducer(reducer, initState)
• nested state 등 복잡한 여러 개의 상태를 한꺼번에 관리하거나, 어떤 상태에 여러 가지 처리를 적용할 때 유용하다.
• 상태 복잡하다면 useState에 관한 callback을 내려주는 것보다 dispatch를 prop으로 내려 리렌더링을 최적화하는 것을 권장된다.

 

💡 오늘 깨달은 것

• Children.toArray(children)
  • 내부의 element를 map으로 했을 때 key를 넣어줘야 되는데 그것을 리액트에 맡겨준다.
  • React 최상위 API - React
• Object.values()
  • Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴한다.
  • 이 배열은 for...in구문과 동일한 순서를 가진다. (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있다.)

  • const object1 = {
      a: 'somestring',
      b: 42,
      c: false
    };
    
    console.log(Object.values(object1));
    // expected output: Array ["somestring", 42, false]

  • Object.values() - JavaScript | MDN