react에서 혹은 {Component()} 의 차이가 뭔가요?

Question

import { Form, Input } from "antd"; const SomeInput = () => { return ; }; function Test() { function FormItem() { return ( <> {SomeInput()} ); } return (

); } export default Test; react에서 위처럼 코드를 작성후 실행하면 input이 생성되고 해당 input에 아무런 값도 입력하지 않고 button을 눌렀을때 input박스가 빨갛게 되면서 please some input 이라는 경고메세지가 나타나게 되는데, 그상태에서 사용자가 해당 input에 값을 입력했을때 {SomeInput()} 위 방식으로 랜더링된 input의 경우 에러메세지가 정상적으로 사라지는데 위 방식으로 랜더링된 input의 경우 값을 입력했는데도 에러메세지가 사라지지 않습니다. 저는 두가지 랜더링 방식간에 기능적인 차이가 없는줄알았는데 버그를 추적하다보니 이러한 차이를 발견을 했네요 혹시 어떤 원리로 이런 차이가 발생하는지 아시는분 계실까요?

ykd · Answer

함수형 컴포넌트 내부에서 컴포넌트를 정의하는 것과 외부에서 정의하는 것은 virtualdom 비교과정에서 렌더링에 차이가 발생하는걸로 알고있습니다

react에서 <Component/> 혹은 {Component()} 의 차이가 뭔가요?

1개의 답변

기술 목록