[TIL] React - Hydration Error

[TIL] React - Hydration Error

날짜

• 2022.06.28.

목표

• SDAO 프로젝트 디버깅

내용

React - Hydration Error

• 원인 - 렌더링하는 동안 pre-rendering React 트리와 브라우저의 첫 번째 Rendering와 차이로 인해 발생

• 해결 - useEffect를 사용하여 상태를 변경해준다.

    import { useEffect, useState } from 'react'
    function MyComponent() {
      const [color, setColor] = useState('blue')
      useEffect(() => setColor('red'), [])
      return <h1 className={`title ${color}`}>Hello World!</h1>
    }

• 참조

  react-hydration-error | Next.js

OS - Sleep()

• 프로세스 안에서 쓰레드가 Running에서 Suspend로 상태를 변경
• Sleep 동안 쓰레드는 스케줄러 관리 대상에서 제외
  • 쉬는게 아니고 제외
• Sleep을 통해 랜덤을 뽑을 수 있다.
  • 실제 초당 주파수는 범용 컴퓨터에서는 모두 다르기 때문

OS - 3 Layers

• User Layer
  • 위의 App Layer에서 동작하는 Process의 API가 존재
• Kernel Layer
  • Driver - H/W의 Device에 Interrupt Request
    • Interrupt Request는 고유의 번호를 통해 요청함
• H/W(Physical) Layer - 관리 및 제어 수행
  • CPU, RAM, HDD, Sound, Video, NIC
• System Call - User와 Kernel의 진입점

결론

• Rendering 차이로 인해 오류가 발생했고, useEffect로 해결 가능했다.