TIL-20220728

회고

• 까먹고 어제 못올렸다.
• 열심히하자.

React

• Rendering Lists (revisited)
  • (Overview) You will often want to display multiple similar components from a collection of data. You can use the JavaScript array methods to manipulate an array of data. On this page, you'll use filter() and map() with React to filter and transform your array of data into an array of components.
  • You will learn
    • How to render coponents from an array using JavaScript's map()
    • How to render only specific components using JavaScript's filter()
    • When and why to use React keys
  • 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?
  • Recap
    • How to move data out of components and into data structures like arrays and objects.
    • How to generate sets of similar components with JavaScript's map().
    • How to create arrays of filtered items with JavaScript's filter().
    • Why and how to set key on each component in a collection so React can keep track of each of them even if their position or data changes.

• Keeping Components Pure (revisited)
  • (Overview) Some JavaScript functions are pure. Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benetifs, though, there are a few rules you must follow
  • You will learn
    • What purity is and how it helps you avoid bugs
    • How to keep components pure by keeping changes out of the render phase
    • How to use StrictMode to find mistakes in your components
  • Purity: Components as formulas
  • Side Effects: (un)intended consequences
  • Local mutation: Your component's little secret
  • Where you can cause side effects
  • Recap
    • A component must be pure, meaning:
      • Mind its own business. It should not change any objects or variables that existed before rendering.
      • Same inputs, same output. Given the same inputs, a component should always returrn the same JSX.
    • Rendering can happen at any time, so components should not depend on each others' rendering sequence.
    • You should not mutate any of the inputs that your components use form rendering. That includes props, state, and context. To update the screen, "set" state instead of mutating preexisting objects.
    • Strive to express your component's logic in the JSX you return. When you need to "change things," you'll usually want to do it in an event handler. As a last resort, you can useEffect.
    • Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm.