Fragment ?
리액트 컴포넌트가 반환하는 요소 한개이거나 여러개일 수 있다.
그렇지만, 한가지 반드시 지켜야 하는 규칙이 있다면 한개든 여러개든 요소들을 감싸는 wrapper 요소가 있어야 한다는 것이다.
return (
<div className="App">
<ToDoForm onGetTodo={getToDo}></ToDoForm>
<ToDoList todoList={todoList} onDeleteTodo={deleteToDo}></ToDoList>
</div>
);위 코드는 2개의 컴포넌트를 반환하는 App 컴포넌트이다.
코드에서도 볼 수 있듯이 return문 안에 2개의 컴포넌트를 한개의 div 태그가 감싸고 있는데, 해당 wrapper 태그를 제거해보자.
위와 같은 에러를 확인할 수 있다.
앞서 말했듯 두개의 컴포넌트를 감싸는 부모요소가 필요하다는 말이다.
우선 여러개의 컴포넌트는 왜 감싸는 부모요소가 필요한지 알아보자.
React.createElement()
부모요소가 필요한 이유는 간단하다.
우리가 보고있는 코드는 return 문이고, Javascript 에서는 한개 이상을 return 할 수 없기 때문이다.
그렇다면 JSX는 여러개의 컴포넌트를 어떻게 return 할까 ?
이전 포스팅에서 React 코드는 브라우저에서 렌더링 되기 직전 Javascript 코드로 변환된다는 사실을 알아봤다.
return (
<div className="App">
<ToDoForm onGetTodo={getToDo}></ToDoForm>
<ToDoList todoList={todoList} onDeleteTodo={deleteToDo}></ToDoList>
</div>
);위 JSX 코드는 React.createElement()를 사용해 Javascript로 변환이 된다.
createElement(type, props, ...chidren) 는 뜻 그대로 요소를 생성하며 파라미터로 생성하려는 요소, 요소에 넘겨줄 props, 그리고 요소안에 들어갈 자식 요소들을 넣어주면 된다.
위 코드를 Javascript로 변환한 결과는 아래와 같다.
return React.createElement("div", { className: "App" },
React.createElement(ToDoForm, { onGetTodo: getToDo }),
React.createElement(ToDoList, { todoList: todoList, onDeleteTodo: deleteToDo })
);코드가 여러줄이라 여러개의 요소를 return 하는것 같지만 결국에는 ToDoForm, ToDoList 컴포넌트들은 파라미터인 ...children으로 전달되고 상위 요소 "div" 하나만 return이 되고 있다.
이렇게 부모요소를 간단히 div 태그를 이용해 감싸줘도 되지만 이럴경우 또다른 문제가 발생한다.
div soup
필요한 부모요소를 div로 만들어 줬다면 당장 개발자 도구를 열어 요소들을 확인해보라.
<div>
<div>
<div>
<div>
<div>(Soup !)</div>
</div>
</div>
</div>
</div>위와 같은 div soup 전투기가 너를 향해 날아올지도... div soup는 예상치 못한 결과를 초래할 수도 있다.
Wrapper 컴포넌트를 별도로 만들어 사용하는 방법도 있지만, React에서는 위와 같은 문제를 해결하기 위해 React.Fragment를 제공한다.
<React.Fragment />
한마디로 컴포넌트들을 감싸는 요소들을 div로 감싸주는 것이 아닌 <React.Fragment />로 감싸주는 방법이다.
return (
<React.Fragments>
<ToDoForm onGetTodo={getToDo}></ToDoForm>
<ToDoList todoList={todoList} onDeleteTodo={deleteToDo}></ToDoList>
</React.Fragments>
);사용 방법은 감싸줄 컴포넌트들을 React.Fragments 태그로 감싸주면 된다.
<></>
<></>는 <React.Fragment>와 같은역할을 하는 더 간단한 형태이다.
return (
<>
<ToDoForm onGetTodo={getToDo}></ToDoForm>
<ToDoList todoList={todoList} onDeleteTodo={deleteToDo}></ToDoList>
</>
);위와 같은 방법으로 <React.Fragment>를 대체할 수 있다.
그러나 이 두개의 형태에 한가지 차이점이 존재하는데 개발을 하다보면 프래그먼트 태그에 key값을 전달해야 하는 경우가 생기는데, 여기서 <></> 태그에는 속성을 설정할 수 없다는 점이다.
따라서 이런 경우 <></>를 사용하지 말고 <React.Fragments>를 사용하면 된다.
React의 버전 업데이트로 인해 React는 생략 가능하다 ! ➡️ 나중에 알아보자.
