React list 렌더링

Volc·2022년 8월 4일
0

React

목록 보기
1/6

React list 렌더링

  • 리그오브레전드의 챔피언과 정보를 리스트로 출력해보자.

    // index.js
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import reportWebVitals from './reportWebVitals';
    
    function ChampionList() {
      const champions = [
        {
          id: 1,
          name: '갱플랭크',
          skill: '혀어어어업상'
        },
        {
          id: 2,
          name: '갈리오',
          skill: '단호한 일격'
        },
        {
          id: 3,
          name: '가렌',
          skill: '결정타'
        }
      ];
      return (
        <div>
          <div>
            <b>{champions[0].name}</b> <br/>
            <span>q 스킬: {champions[0].skill}</span>
            <div><br/></div>
          </div>
          <div>
            <b>{champions[1].name}</b> <br/>
            <span>q 스킬: {champions[1].skill}</span>
            <div><br/></div>
          </div>
          <div>
            <b>{champions[2].name}</b> <br/>
            <span>q 스킬: {champions[2].skill}</span>
            <div><br/></div>
          </div>
        </div>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <ChampionList />
      </React.StrictMode>
    );
    
    reportWebVitals();
  • 위 코드의 경우 list가 3개밖에 없지만 이게 많아지면 코드가 매우 길어질 수 있다.

  • 이를 해결하기 위해 다음과 같이 Champion function을 하나 만들어주자.

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import reportWebVitals from './reportWebVitals';
    
    function Champion({champion}){
      return(
        <div>
          <b>{champion.name}</b> <br/>
          <span>q 스킬: {champion.skill}</span>
          <div><br/></div>
        </div>
      )
    }
    
    function ChampionList() {
      const champions = [
        {
          id: 1,
          name: '갱플랭크',
          skill: '혀어어어업상'
        },
        {
          id: 2,
          name: '갈리오',
          skill: '단호한 일격'
        },
        {
          id: 3,
          name: '가렌',
          skill: '결정타'
        }
      ];
      return (
        <div>
          <Champion champion={champions[0]}/>
          <Champion champion={champions[1]}/>
          <Champion champion={champions[2]}/>
        </div>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <ChampionList />
      </React.StrictMode>
    );
    
    reportWebVitals();
    
  • 그래도 아직 코드가 길어질 수 있으니 더 짧게 만들어보자.

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import reportWebVitals from './reportWebVitals';
    
    function Champion({champion}){
      return(
        <div>
          <b>{champion.name}</b> <br/>
          <span>q 스킬: {champion.skill}</span>
          <div><br/></div>
        </div>
      )
    }
    
    function ChampionList() {
      const champions = [
        {
          id: 1,
          name: '갱플랭크',
          skill: '혀어어어업상'
        },
        {
          id: 2,
          name: '갈리오',
          skill: '단호한 일격'
        },
        {
          id: 3,
          name: '가렌',
          skill: '결정타'
        }
      ];
      return (
        <div>
          {champions.map(champion =>(
            <Champion champion={champion} key={champion.id}/>
          ))}
        </div>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <ChampionList />
      </React.StrictMode>
    );
    
    reportWebVitals();
    

    map을 사용하여 리스트를 알아서 렌더링 할 수 있게끔 만들었다.
    map 함수 안에 champion 태그에 key={champion.id}를 넣어줬는데 이것은 배열의 삽입,삭제 후 재랜더링 할 때 더 빠르게 해준다.

profile
미래를 생각하는 개발자

0개의 댓글