📸 2022-07-19

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• React에서 JSX 요소 반환하기
• React
  • useEffect 사용법
    • useEffect의 clean-up으로 디바운싱 구현해보기
  • Portals & Ref
    • Portals 사용법과 이벤트 버블링
    • Ref 사용법
• 실용주의 프로그래머 1장 읽기

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• React.createElement으로 하나의 태그만 반환해야 한다고 하는데 이유가 궁금
• 예전부터 듣기는 많이 들었던 디바운싱(Debouncing)과 쓰로틀링(Throttling) 더 자세히 알아보기

🌟 내일은 어떻게 해보고 싶으세요?

• React - useReducer 알아보기

---

React에서 JSX 요소 반환하기

하나의 컴포넌트는 햔 개의 요소만을 반환해야 한다. 따라서 JSX 문법을 사용할 때에는 아래와 같이 하나의 태그만 반환해야 한다.

const Content = () => {
  return (
      <h2>title</h2>
      <p>description</p>
  );
};

Content 컴포넌트는 title과 description을 보여주는 태그로 구성되어있다.

하지만 반환 시에는 하나의 태그만 반환해야 하므로 위와 같이 컴파일을 하게 되면 오류가 난다. JSX 문법을 사용하여 컴포넌트 내용을 반환하기 위해서는 다음과 같은 방법이 있다.

1. 최상위에 div태그로 감싸기

   const content = () => {
     return (
       <div>
         <h2>title</h2>
         <p>description</p>
       </div>
     );
   };
   

   가장 간단하고 많이 사용하는 방법이지만 이와 같이 감싸는 용도의 div를 사용한 여러 컴포넌트가 겹쳐지면 <div> soup(div 중첩)가 발생한다.

   div가 많이 중첩될수록 속도가 느려지고 스타일을 적용할 때에도 번거로움이 있을 수 있다.

2. JSX 요소들을 배열에 담아 반환

   const content = () => {
   return (
       [
       <h2>title</h2>
       , <p>description</p>
       ]
       </div>
   );
   };
   

   배열로 반환하게 되면 목록 유형의 컴포넌트와 같이 각 요소마다 key 값을 부여해야 한다.

3. UI 요소 없는 눈속임 컴포넌트로 감싸기

   const Wrapper = (props) => {
     return props.children;
   };
   
   const content = () => {
     return (
       <Wrapper>
         <h2>title</h2>
         <p>description</p>
       </Wrapper>
     );
   };
   

   여기서 Wrapper 컴포넌트는 JSX 문법으로 UI 요소를 사용하지 않고 그저 파라미터로 전달받은 props의 하위 내용만 반환한다.

   content 컴포넌트의 내용을 Wrapper 컴포넌트로 감싸주면 불필요한 div 태그를 사용하지 않아도 되어 코드를 관리하고 스타일을 적용하기에 훨씬 수월하다.

4. <React.fragment>(또는 <></>) 사용하기 3번의 눈속임 컴포넌트의 기능을 리액트에서 제공해주는데 이것이 바로 <React.fragment>이다.