Passing Props to a Component

• using spread syntax 유용하다.

Rendering Lists

• using <Fragment> for key
• you can have “key” prop in your custom component

challenge 3 정리.

• “array of Recipe components now, therefore each of Recipe component now needs to have a key. In other words, when you extract a component, don’t forget to leave the key outside the JSX you copy and paste.”

challenge 4 정리.

• rare case where index as a key is acceptable?
• 두번째 솔루션 0보다 클때 앞에 추가하는 방식.
  • 나는 length보다 작을때 뒤에 추가하는 방식으로 했는데, 이게 더 코드가 간단하네.

Keeping Components Pure

• challenge 1 번이 구체적으로 정확히 이 주제와 어떻게 연결되는 건지 개념 이해가 잘 안됨.
• 2, 3 번이 impure한 경우 어떤식으로 버그가 날 수 있는지 잘 보여주는 challenge인듯. 왜 purity를 지켜야 하는지 느끼게 해준다.
• challenge 3, 두번째 solution에서..

  • ⇒ It is useful to remember which operations on arrays mutate them, and which don’t. For example, push, pop, reverse, and sort will mutate the original array, but slice, filter, and map will create a new one.

  • 나는 spread syntax써서 new array 만들었는데, 이것도 맞는거 같다. (shallow copy가 되는게 맞다고 한다. 즉 기존 array는 건드리지 않음)

    

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Your UI as a Tree

• render tree와 module dependency tree에서 Copyright 컴포넌트가 가지는 차이점