TIL-20220708

회고

• 좀 열심히 하자....
• 자료구조 / 네트워크 등 CS도 최소한 daily로 하고 정리하자
• React Docs가 참 잘 되어 있는 것 같다.
  • 결론은 할 수 있느냐 없느냐는 정보의 접근성이 문제가 아니라 100% 본인 의지 문제라는 거...
• 내일 다시 파이팅 해보자
• React에서 Component, props, state, hook, state update queue(batching) 개념은 시간이 걸리더라도 정확히 나만의 언어로 정의해서 다른 사람들에게 설명할 수 있어야 되고 컨센서스를 가져야 한다.

React

• Rendering Lists
  • Rendering data from arrays
  • Filtering arrays of items
  • Keeping list items in order with key
    • Where to get your key
    • Rules of keys
    • Why does React need keys?

• Keeping Components Pure
  • Purity: Components as formulas
  • Side Effects: (un)intended consequences
  • Local mutation: Your component's little secret
  • Where you can cause side effects

• Responding to Events
  • Adding event handlers
    • Reading props in event handlers
    • Passing event handlers as props
    • Naming event handler props
  • Event propagation
    • Stopping propagation
    • Passing handlers as alternative to propagation
    • Preventing default behavior
  • Can event handlers have side effects?

• State: A Component's Memory
  • When a regular variable isn't enough
  • Adding a state variable
    • Meet your first Hook
    • Anatomy of useState
  • Giving a component multiple state variables
  • State is isolated and private

• Render and Commit
  • Step 1: Trigger a render
    • Initial render
    • Re-render when state updates
  • Step 2: React renders your components
  • Step 3: React commits changes to the DOM
  • Epilogue: Browser paint

• State as a Snapshot
  • Setting state triggers renders
  • Rendering takes a snapshot in time
  • State over time

• Queueing a Series of State Updates
  • React batches state updates
  • Updating the same state variable multiple times before the next render
    • What happens if you update state after replacing it
    • What happens if you replace state after updating it
    • Naming conventions

• Updating Objects in State
  • What's a mutation?
  • Treat state as read-only
  • Copying objects with the spread syntax
  • Updating a nested object
    • Write concise update logic with Immer

• Reacting to Input with State
  • How declarative UI compares to imperative
  • Thinking about UI declaratively
    • Step 1: Identify your component's differnt visual states
    • Step 2: Determine what trigger those state changes
    • Step 3: Represent the state in memory with useState
    • Step 4: Remove any non-essential state variable
    • Step 5: Connect the event handlers to set state