리액트 함수 컴포넌트 10가지 반환값

들어가기전

리액트 함수 컴포넌트의 10가지 반환값을 알아보겠습니다.

 

1. div요소   

 <div>안녕하세요</div> 

2. 컴포넌트     

<Counter />       

3. 문자열

"안녕" 

 

4. 숫자 

1

5. 배열

['안녕']

 

6. null 

null

7. boolean 

{false} 
{true}

8. 배열안 요소

[<p key={1}>안녕</p>,<p key={2}>하슈</p>] 

배열은 key값이 필요.

리액트가 가상돔에서 연산을 효율적으로 하도록 돕는다.

9. <React.Fragment> 

  <React.Fragment>
     <p>안녕</p>     
     <p>하슈</p>
  </React.Fragment>
  
  // React.Fragment 생략가능
  <>
     <p>안녕</p>     
     <p>하슈</p>
  <>

 

리액트 문법상 모든 코드를 감싸는 태그가 있어야합니다.

</React.Fragment>은 실제 돔에는 반영이 되지 않아 렌더링되지 않습니다.

감싸는 태그가 불필요할 때 대신하여 쓸 수 있습니다.

 

* </React.Fragment>의 축약형 : <> </>

10. ReactDOM.createPortal

 

{ReactDOM.createPortal(
   <div>
     p>안녕하세요</p>
     <p>좋은 아침입니다</p>
   </div>,
   document.getElementById('something'),
 )}

ReactDOM.createPortal은 root element 말고 다른 멀리떨어진 element를 렌더링하고 싶을때 사용합니다.

ReactDOM에 있는 함수를 사용합니다.