#React List구현 하기!!

React를 공부하면서, 서버로부터 List를 받아오고 어떻게 HTML에다가 뿌릴 수 있을까?라고 궁금해했다

 

그래서 이번엔 찾아보면서 드디어 하는 방법을 알아냈다.

 

일단 최상위에다가 실습할 컴포넌트를 추가한다

*Component는 무조건 앞에 대문자로하자... 삽질버렸따 ☆彡‘

 

그다음은 컴포넌트를 만드는 함수를 생성해 주도록 하자

const ListComponent = () => {
  
}

 

그다음 해야 할 일

1. List 데이터를 준비한다 (서버에서 받아온 값이라고 생각하자)

2. element를 만들 리스트 변수 하나 선언

2. for문으로 <div> list값 </div>을 2번에서 만든 변수에 add 하기!

3. 마지막으로 return 하기!

 

위의 순서대로 작성한다 

 

forEach모르는 흑우 없제?

const ListComponent = () => {
    let list = ['안녕', '디지몬', '네 꿈을 꾸면서', '잠이 들래'];

    let returnElement = [];
    
    list.forEach(e => {
      returnElement.push(<div>{e}</div>);
    });
    
    // 위의 forEach문이랑 동일
    //for (let = 0; i < list.length; i++) {
    //  reutrnElemnet.push(<div>{list[i]}</div>);
    //} 

    console.log(returnElement);

    return(
      <div>
        { returnElement }
      </div>
    )

}

마지막으로 return 할 때 저기 리스트 변수 하나만 넣어주면 끝이다

 

그럼 브라우저 결과는 제대로 리스트가 출력된것을 볼 수가 있다

하지만...

 

에러가 떴다. 그래서 나는 다시 삽질을 해야한다

 

어이~ 거기 삽 좋은거 주소~

 

삽질한 결과, 그이유는 각 div Element에 key값을 줬었어야 했다

 

<div key={list.indexOf(e)}>{e}</div>

이런식으로 key={ 유일한값 } 을 주도록 하면된다. 그러면 error가 뜨지 않는다

 

React행님이 요구하는 것을 들어주자