`})]})})]})}),(0,e.jsx)(n.div,{children:(0,e.jsx)(c,{alt:"log children prop",src:"/static/images/why-children-not-re-rendered/log-children.png",width:"254",height:"142"})}),(0,e.jsxs)(n.p,{children:["\uCD9C\uB825\uB41C Child element \uAC1D\uCCB4\uB97C \uBCF4\uBA74 ",(0,e.jsx)(n.code,{children:"owner"})," \uC18D\uC131\uC744 \uBCFC \uC218 \uC788\uB2E4. ",(0,e.jsx)(n.code,{children:"owner"})," \uC18D\uC131\uC744 \uD1B5\uD574 ",(0,e.jsx)(n.code,{children:""}),"\uC758 \uC18C\uC720\uC790\uB294 ",(0,e.jsx)(n.code,{children:""}),"\uC784\uC744 \uC54C \uC218 \uC788\uB2E4."]}),(0,e.jsxs)(n.p,{children:["\uC989, ",(0,e.jsx)(n.code,{children:""}),"\uC758 \uBD80\uBAA8\uC778 ",(0,e.jsx)(n.code,{children:""}),"\uB294 ",(0,e.jsx)(n.code,{children:""}),"\uC758 \uC18C\uC720\uC790\uAC00 \uC544\uB2C8\uAE30 \uB54C\uBB38\uC5D0 ",(0,e.jsx)(n.code,{children:""}),"\uAC00 \uB9AC\uB80C\uB354\uB9C1\uB418\uC5B4\uB3C4 ",(0,e.jsx)(n.code,{children:""}),"\uB294 \uB9AC\uB80C\uB354\uB9C1\uB418\uC9C0 \uC54A\uC558\uB358 \uAC83\uC774\uB2E4."]}),(0,e.jsx)(n.p,{children:"\uC18C\uC720 \uCEF4\uD3EC\uB10C\uD2B8\uB294 React dev tools\uC5D0\uC11C\uB3C4 \uD655\uC778\uD560 \uC218 \uC788\uB2E4."}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.p,{children:"component tree"}),(0,e.jsx)(n.div,{children:(0,e.jsx)(c,{alt:"dev tools component tree",src:"/static/images/react-rerender/dev-tools-component-tree.png",width:"124",height:"68"})})]}),(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.p,{children:"owner tree"}),(0,e.jsx)(n.div,{children:(0,e.jsx)(c,{alt:"dev tools owner tree",src:"/static/images/react-rerender/dev-tools-owner-tree.png",width:"215",height:"78"})})]})]}),(0,e.jsx)(n.p,{children:"React dev tools\uC5D0\uC11C \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uB354\uBE14\uD074\uB9AD\uD558\uBA74 \uBAA9\uB85D \uC0C1\uB2E8\uC5D0\uC11C owner tree\uB97C \uBCFC \uC218 \uC788\uB2E4."}),(0,e.jsxs)(n.p,{children:["\uC774\uBBF8\uC9C0\uC5D0\uC11C \uBCF4\uC774\uB294 \uAC83\uCC98\uB7FC component tree\uB294 ",(0,e.jsx)(n.code,{children:"ChildrenProp -> Parent -> Child"}),"\uB85C \uB098\uD0C0\uB098\uC9C0\uB9CC, owner tree\uB294 ",(0,e.jsx)(n.code,{children:"ChildrenProp -> Child"}),"\uB85C \uB098\uC628\uB2E4."]}),(0,e.jsxs)(n.h1,{id:"\uACB0\uB860",children:[(0,e.jsx)(n.a,{href:"#\uACB0\uB860","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"\uACB0\uB860"]}),(0,e.jsx)(n.p,{children:"\uC5B4\uB5A4 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uBD80\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC544\uB2CC \uC18C\uC720 \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uB80C\uB354\uB9C1\uB420 \uB54C \uADF8 \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uB80C\uB354\uB9C1\uB41C\uB2E4\uB294 \uAC78 \uC54C\uC544\uBCF4\uC558\uB2E4. \uC774 \uC0AC\uC2E4\uC744 \uBC14\uD0D5\uC73C\uB85C React \uB3D9\uC791\uC744 \uC0B4\uD3B4\uBCF4\uBA74 \uBD80\uBAA8 - \uC790\uC2DD \uAD00\uACC4\uB85C \uC0DD\uAC01\uD560 \uB54C\uBCF4\uB2E4 \uC27D\uAC8C \uC774\uD574\uD560 \uC218 \uC788\uB2E4."}),(0,e.jsxs)(n.h1,{id:"references",children:[(0,e.jsx)(n.a,{href:"#references","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"References"]}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://www.developerway.com/posts/react-elements-children-parents",children:"The mystery of React Element, children, parents and re-renders"})}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://velog.io/@2ast/React-children-prop%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0feat.-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94",children:"React) children prop\uC5D0 \uB300\uD55C \uACE0\uCC30(feat. \uB80C\uB354\uB9C1 \uCD5C\uC801\uD654)"})}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://julesblom.com/writing/parents-owners-performance",children:"Parents & Owners in React: Rendering Performance"})}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://ko.legacy.reactjs.org/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live",children:"Thinking In React"})}),(0,e.jsx)(n.p,{children:(0,e.jsx)(n.a,{href:"https://medium.com/welldone-software/react-elements-parent-vs-rendered-by-4f879849cd58",children:"React Element\u2019s \u201CParent\u201D vs \u201CRendered By\u201D"})})]})}function C(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(d,a)})):d(a)}var b=C;function p(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(v);})(); ;return Component;

React

왜 children은 리렌더링되지 않을까?