κΈ°λ₯ μ μμ²νκ±°λ λ²κ·Έλ₯Όλ³΄κ³ νμκ² μ΅λκΉ?
κ³€μΆ©
νμ¬ νλμ 무μμ λκΉ?
λ€μ 쑰건μ λͺ¨λ μΆ©μ‘±νλ κ΅¬μ± μμμ λν κ²½κ³ κ° μ½μμ νμλ©λλ€.
React.memo
μ¬μ©νμ¬ λ©λͺ¨λ©λλ€.κ²½κ³ ν
μ€νΈ : Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.
νμ¬ λμμ΄ λ²κ·Έ μΈ κ²½μ° μ¬ν λ¨κ³λ₯Ό μ 곡νκ³ κ°λ₯νλ©΄ λ¬Έμ μ λν μ΅μνμ λ°λͺ¨λ₯Ό μ 곡νμμμ€. μλμ JSFiddle (https://jsfiddle.net/Luktwrdm/) λλ CodeSandbox (https://codesandbox.io/s/new) μμ μ λν λ§ν¬λ₯Ό λΆμ¬ λ£μΌμμμ€.
https://codesandbox.io/s/71lr16j491
μμλλ λμμ 무μμ λκΉ?
νν¬ κ·μΉμ΄ μΆ©μ‘±λμμΌλ―λ‘ κ²½κ³ κ° νμλμ§ μμμΌν©λλ€. λν React.memo
μ¬μ© μ¬λΆμ κ΄κ³μμ΄ λμμ΄ μΌκ΄λμ΄μΌν©λλ€.
μ΄λ€ λ²μ μ Reactμ μ΄λ€ λΈλΌμ°μ / OSκ°μ΄ λ¬Έμ μ μν₯μ λ°μ΅λκΉ?
λ°μ 16.8.1
λ΄ μ²« λ²μ§Έ μ½κΈ°λ μ΄κ²μ΄ λ²κ·Έμ λλ€.
λ²μ 16.8.1
μμ μ΄μ λμΌν λ¬Έμ λ₯Ό λ°κ²¬νμ΅λλ€. κ·Έλ¬λ μ κ²½μ°μλ Promise
κ° λμ Έμ§λ μ₯μμ Suspense
μ»΄ν¬λνΈ μ¬μ΄μ λ©λͺ¨ λ μ»΄ν¬λνΈκ° μμ΅λλ€.
κ΅¬μ± μμλ Promise
κ° λ°μνκ³ κ²½κ³ κ° νμλκΈ° μ μ λ κ°μ νν¬λ₯Ό 맨 μμ μ μΈν©λλ€. λλ νν¬μ κ°μ μΌμ΄ μΌμ΄λκΈ° μ μ Promise
λ₯Ό 맨 μμ λμ§λ νΈμΆμ μ΄λνμ΅λλ€. κ΅¬μ± μμ λ΄μ Promise
λ°μνμ§ μμΌλ©΄ κ²½κ³ κ° μ¬λΌμ§λλ€.
λ΄ κ΅¬μ± μμμ λͺ¨μλ λ€μκ³Ό κ°μ΅λλ€.
function Component(props) {
const [state, setState] = useState()
useEffect(...)
// Promise is thrown somewhere after these two
// hooks on top, but before the return statement.
return (
...
)
}
μ΄κ²μ νμΈν μ μμ΅λλ€.
16.8.2μμ μμ λμμ΅λλ€.
https://codesandbox.io/s/vmmkmvo6pl
κ°μ₯ μ μ©ν λκΈ
16.8.2μμ μμ λμμ΅λλ€.
https://codesandbox.io/s/vmmkmvo6pl