React 컴포넌트를 리스트로 표시하는 방법

  author: Dev.ian
  createdAt: 2024-08-29
  updatedAt: 2024-08-29

List 의 map 함수로 컴포넌트 표시하기

최상위 tag 의 key 를 중복되지 않는 값으로 설정해주어야 한다.

  return (
    {
      list.map((item, index) => {
        return (
          <div key={`${index}`}>
            <span>{item}</span>
          </div>
        );
      });
    }
  );

전체 코드

  const prepare = async () => {
    return new Promise<string[]>((resolve, reject) => {
      setTimeout(() => {
        resolve(['Apple', 'MS', 'Google']);
      }, 300);
    });
  };

  export default function index() {
    const [result, setResult] = React.useState<string[]>([]);
    const [loading, setLoading] = React.useState<boolean>(true);
    const [error, setError] = React.useState<boolean>(false);

    useEffect(() => {
      prepare()
        .then(result => {
          setResult(result);
          setLoading(false);
        }).catch(err => {
          console.error('fail-prepare', err);
          setError(true);
        });
    }, []);

    return (
      error
        ? <div><h1>Error!!!</h1></div>
        :
        loading
          ? <div><h1>Lodaing...</h1></div>
          : {
              result.map((item, index) => {
                return (
                  <div key={`${index}`}>
                    <span>{item}</span>
                  </div>
                );
              });
            }
    );
  }

List 의 map 함수로 컴포넌트 표시하기​

List 의 map 함수로 컴포넌트 표시하기