컴포넌트 함수의 반환값
1) div 리액트 요소
2) 컴포넌트
3) 문자열, 숫자
4) ⭐️ 배열 (키값 필수)
5) fragment
6) null/ boolean
7) Portal
6. 컴포넌트 함수의 반환값
1) div 리액트 요소
export default function App() {
return <div>안녕하세요</div>;
}2) 컴포넌트
export default function App() {
return <Counter />;
}3) 문자열, 숫자
export default function App() {
return '안녕';
}4) 배열 : 배열로 반환할 때는 리액트 요소가 항상 key를 가지고 있어야 한다. key는 렌더링을 효율적으로 하기 위해서 필요하다. 리액트가 이 값을 이용해서 가상돔에서의 연산을 효율적으로 할 수가 있다.
export default function App() {
return [<p key={1}>world</p>, <p key={2}>hello</p>];
}5) fragment
- Fragment에서는 내부 요소의 순서가 일종의 key 역할을 하기 때문에 key를 입력하지 않아도 오류가 나지 않는다.
- Fragment는 이렇게 여러 개의 요소를 반환할 때 유용하게 사용된다.
- Fragment 기능은 비교적 최근에 추가된 기능인데, 이 기능이 없을 때는 div 태그로 감싸 줬다. 이 경우에는 원치 않는데 이렇게 div요소가 추가되는 단점이 있었다.
- 하지만 이렇게 Fragment를 사용하면 실제 dom에는 반영되지 않는다.
- Fragment를 자주 쓰는 경우에는 아무것도 입력하지 않는 축약형으로 작성을 할 수가 있다.
// 축약형
<>
</>export default function App() {
return (
<React.Fragment>
<p>Hello</p>
<p>World</p>
</React.Fragment>
);
}6) null/ boolean
- null 이나 boolean 값은 실제 화면에 출력되지 않는다.
- boolean 값은 아래와 같이 조건부 렌더링을 할 때 유용하게 사용된다.
export default function App() {
return (
<div>
{null}
{false}
{true}
</div>
);
}export default function App() {
return (
<div>
{count.value > 0 && <Title title={`현재 카운트: ${count.value}`} />
</div>
);
}7) Portal
- 리액트 Portal은 html에서 root 엘리먼트 말고 다른 멀리 떨어진 엘리먼트에 렌더링하고 싶을 때 사용할 수 있다.
- index.html 설정
<body>
<div id="root"></div>
<div id="something"></div>
</body>-
App.js 설정
- 리액트 Portal을 사용하기 위해선 react-dom이 있는 함수 사용
- createPortal이라는 함수를 사용하고 두번째 매개변수는 html에 있는 요소를 지정해줌. 그럼
something요소 밑에 렌더링 됨 - 모달 창을 위해 많이 사용되기도 함
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';
export default function App() {
return (
<>
<p>안녕</p>
<Counter />
{ReactDOM.createPortal(
<div>
<p>hello</p>
<p>world</p>
</div>,
document.getElementById('something'),
)}
</>
);
}
```~~텍스트~~
고객에게 명료한 의미를 전달하고, 명료한 코드를 통해 생산성 향상에 기여하고자 노력합니다.