Array.prototype.{map, reduce, join} 에 착안한 선언적 리액트 컴포넌트 만들기

List.js

const arr = [
  { id: 1, text: "abc" },
  { id: 2, text: "def" },
  { id: 3, text: "ghi" },
];

const Map = ({ list, children }) => <>{list.map((el) => children(el))}</>;

const Join = ({ separator, children }) => {
  // const [Frag] = React.Children.toArray(children);

  // console.log(Frag);

  // const L = React.Children.map(Frag, (Comp, i) => {
  //   console.log(i);

  //   return Comp;
  // });

  // console.log(L);

  console.log(children);

  return <div> {children}</div>;
};

const List = () => (
  <ul>
    <Join separator={<br />}>
      <Map list={arr}>{({ id, text }) => <li key={id}>{text}</li>}</Map>
    </Join>
  </ul>
);

1. Array.prototype.join

Array.prototype.join 메서드는 각 문자열을 하나의 문자열로 합치면서 각 문자열 사이에 매개변수인 separator를 삽입해준다.

  const arr = ["abc", "def", "ghi"];
  const joined = arr.join("-"); // "abc-def-ghi"

2. jsx 에서 map을 사용하여 list 를 DOM객체로 표현

 const arr = ["abc", "def", "ghi"];
 const List = (
    <ul>
      {arr.map((str, i) => (
        <li key={i}>{str}</li>
      ))}
    </ul>
  ); 
/* <ul>
  <li>abc</li>
  <li>def</li>
  <li>ghi</li>
</ul>
*/

3. 각 <li /> 사이에 <br /> 을 넣고 싶으면 어떻게 할까?

즉, 다음과 같은 DOM객체를 만들고 싶다면?

<ul>
  <li>abc</li>
  <br />
  <li>def</li>
  <br />
  <li>ghi</li>
</ul>

jsx로 나타낸다면 다음과 같다

const arr = [
  { id: 1, text: "abc" },
  { id: 2, text: "def" },
  { id: 3, text: "ghi" },
];

const List = (
  <ul>
    {arr.map(({id, text}) => (
      <>
        <li key={id}>{text}</li>
        {i < arr.length - 1 ? <br /> : null}
      </>
    ))}
  </ul>
);

개념적으로 <br />은 <li /> 배열의 각 <li /> 사이에 들어가는 join 메서드의 separator와 같은 역할이다.

const arr = [
  { id: 1, text: "abc" },
  { id: 2, text: "def" },
  { id: 3, text: "ghi" },
];

const List = arr.map(({ id, text }) => <li key={id}>{text}</li>).join(<br />);

4. <Map />, <Join /> 컴포넌트를 만들어보자

const arr = [
  { id: 1, text: "abc" },
  { id: 2, text: "def" },
  { id: 3, text: "ghi" },
];

const List = (
  <ul>
    <Join separator={<br />}>
      <Map list={arr}>{({ id, text }) => <li key={id}>{text}</li>}</Map>
    </Join>
  </ul>
);

/* List SHOULD-BE 
<ul>
  <li>abc</li>
  <br />
  <li>def</li>
  <br />
  <li>ghi</li>
</ul>
*/

Reference

https://stackoverflow.com/questions/34034038/how-to-render-react-components-by-using-map-and-join
react-if: https://github.com/romac/react-if