React Fragment-task와 연결해서 분석

Fragment는 DOM에 별도의 노드를 추가하지 않고, 여러 자식을 그룹화할 수 있다. 

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

• 코드가 위와 같이 작성됐을 때 <Colums /> component는 무조건 <td>만 반환해야 한다! 

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

• 코드가 위와 같이 작성됐을 경우 html은 유효하지 않을 것이다 => <div> 태그가 끼어있기 때문에!
• Fragment은 위와 같은 상황에서 발생하는 문제를 해결해준다! 

사용법: 

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

• JSX의 규칙에 따라, 마크업 태그는 무조건 하나의 element 안에 감싸져서 return돼야 한다! 하지만, div로 감쌀 경우 상황에 따라, html가 유효하지 않을 수도 있다. 하지만 위와 같이 코드를 짠다면 

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

• <Table />은 개발자가 의도한 대로, 위와 같이 렌더링된다!

단축문법: 

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

• 빈태그처럼 작성해도 <React.Fragment>을 작성한 것처럼 작동할 수 있다! 단,  key/attributes을 지원하지 않음! 

key가 있는 Fragments

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

• Key가 있을 경우 문법으로 명시해줘야 한다! ==> Key는 Fragment에 전달할 수 있는 유일한 attributes이다!(추후에 이벤트 헨들러와 같은 추가적인 attributes를 지원할 수도 있음!)

    <React.Fragment>
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile">
            <img src="https://randomuser.me/api/portraits/men/98.jpg" />
          </div>
          <div className="tweetForm__inputContainer">
            <div className="tweetForm__inputWrapper">
              <div className="tweetForm__input">
                <input
                  type="text"
                  defaultValue="parkhacker"
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  onChange={handleChangeUser}
                ></input>
                <textarea
                  className="tweetForm__input--message"
                  onChange={handleChangeMsg}
                ></textarea>
              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
                  {"total: "}
                  {TweetLists.length}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한  전송트윗을할 수 있는 button 엘리먼트를 작성하세요. */}
              <button
                className="tweetForm__submitButton"
                onClick={handleButtonClick}
              >
                Tweet
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="tweet__selectUser"></div>
      <ul className="tweets">
        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {TweetLists.map((element) => {
          return <Tweet tweet={element} key={element.id} />;
        })}
      </ul>
      <Footer />
    </React.Fragment>

• 위 코드에서 작성된 <React.Fragment>의 경우 각각 분산된 component들을 하나로 묶기 위해 사용됐다. JSX의 규칙를 생각하면 필수적!

---

 

출처: 

https://ko.reactjs.org/docs/fragments.html

Fragments – React