[React] 함수형 컴포넌트의 반환 return 값 조건 & Fragment(프래그먼트) <>...</>
·
Programming/React
일반적인 함수에서 return 값을 두 개 가질 수 없듯이 함수형 컴포넌트에서도 여러 개의 요소를 반환 할 수 없다.리액트 컴포넌트는 반드시 하나의 요소를 반환 해야한다. 이와 같이 리액트의 함수형 컴포넌트의 return 값에는 몇가지 조건이 있다.✅ 1. 반드시 하나의 리액트 엘리먼트(React Element)를 반환해야 한다.❌잘못된 예시 (여러 개의 요소를 반환)function Welcome() { return Hello React!; // 오류 발생 ❌}그러나 화면의 UI를 구성하기 위해서 하나의 엘리먼트로는 부족한 경우가 많다. 이를 해결하기 위해 불필요한 로 감쌀 수 있다.⭕ 올바른 예시 (하나의 부모 요소로 감싸기)function Welcome() { return ( ..
[React] Element와 Componet의 차이
·
Programming/React
🎈Element앱의 UI를 구성하는 가장 단위immutable 객체(불변)화면에 표시할 내용을 기술하는 단순한 객체이며, 실제 DOM 요소를 직접 만들지는 않는다.React.createElement() 함수로 생성되며, JSX를 사용하면 더 쉽게 작성 가능하다.const element = Hello, React!;아래 element는 화면에 Hello, React!를 표현하는 객체일 뿐, 아직 실제 DOM에 반영된 것은 아니다. 리액트는 이러한 엘리먼트를 ReactDOM.render() 혹은 useState, useEffect 등의 업데이트 과정에서 가상 DOM을 통해 실제 DOM으로 변환합니다. 🎈Component리액트 엘리먼트를 반환하는 함수 또는 클래스컴포넌트는 여러개의 엘리먼트들을 조합하여 재..