리액트에서 Map으로 배열 렌더링

Examples라는 값의 구성은 key와 value이고 그 value 안에 또 key 와 value가 있는 배열이다.

const EXAMPLES = {
  components: {
    title: 'Components',
    description:
      'Components are the building blocks of React applications. A component is a self-contained module (HTML + optional CSS + JS) that renders some output.',
    code: `
      function Welcome() {
        return <h1>Hello, World!</h1>;
      }`,
  },
  jsx: {
    title: 'JSX',
    description:
      'JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript (e.g., it may output dynamic content).',
    code: `
      <div>
        <h1>Welcome {userName}</h1>
        <p>Time to learn React!</p>
      </div>`,
  },
  props: {
    title: 'Props',
    description:
      'Components accept arbitrary inputs called props. They are like function arguments.',
    code: `
      function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
      }`,
  },
  state: {
    title: 'State',
    description:
      'State allows React components to change their output over time in response to user actions, network responses, and anything else.',
    code: `
        function Counter() {
          const [isVisible, setIsVisible] = useState(false);

          function handleClick() {
            setIsVisible(true);
          }

          return (
            <div>
              <button onClick={handleClick}>Show Details</button>
              {isVisible && <p>Amazing details!</p>}
            </div>
          );
        }`,
  },
};

이럴 때 단순히

{EXAMPLES.map((item, i) => (<TabButton key={i} onSelect={() => handleSelect(item)} title={item.title}></TabButton>))}

로 하면 안된다. 왜냐면 key값이 하나 더 있기 때문이다.

{Object.entries(EXAMPLES).map(([key, value], i) => (<TabButton key={i} onSelect={() => handleSelect(value)} title={value.title}></TabButton>))}

위와 같이 [key, value] 로 하면 객체의 [키, 값]쌍을 반복하고 각 값에 대해서 TabButton에 값을 전달할 수 있다.

Object.entries() 메서드는 객체의 각 키-값 쌍을 [키, 값] 형태의 배열로 반환해준다.

const EXAMPLES = {
  components: {
    title: 'Components',
    description:
      'Components are the building blocks of React applications. A component is a self-contained module (HTML + optional CSS + JS) that renders some output.',
    code: `
      function Welcome() {
        return <h1>Hello, World!</h1>;
      }`,
  },
  jsx: {
    title: 'JSX',
    description:
      'JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript (e.g., it may output dynamic content).',
    code: `
      <div>
        <h1>Welcome {userName}</h1>
        <p>Time to learn React!</p>
      </div>`,
  }
 }

즉 이 코드에서 Object.entries() 메서드를 사용하면

[
	['components',{title: 'Components', description:'...', code:'...'}],
	['jsx',{title: 'JSX', description:'...', code:'...'}]
]

의 배열이 생성되는 것이다.

따라서 원하는 값을 해당 컴포넌트에 전달할 수 있다.

{EXAMPLES.map((item, i) => (<TabButton key={i} onSelect={() => handleSelect(item)} title={item.title}></TabButton>))}

이렇게 쓸 때는 Example 값이

const CORE_CONCEPTS = [
  {
    title: 'Components',
    description:
      'Components are the building blocks of React applications. A component is a self-contained module (HTML + optional CSS + JS) that renders some output.',
    code: `
      function Welcome() {
        return <h1>Hello, World!</h1>;
      }`,
  },
  {
     title: 'JSX',
     description:
      'JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript (e.g., it may output dynamic content).',
     code: `
      <div>
        <h1>Welcome {userName}</h1>
        <p>Time to learn React!</p>
      </div>`,
  }
]

이렇게 됐을 때이다!