게시판만들기 데이터를 목록으로 보여주자(react,list,map)

 

 

만들고 잇는 게시판 게시물인데 밋밋하다

 

댓글 리스트를 보여주고 싶다

 

 

 

 

 

 

 

먼저 데이터 리스트가 필요하다

바로 반응하기 위해서 난 state값으로 list이름의 배열을 만들어 줫다 

class Boardreple extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [], // <== 비어잇음
    };
  }

 

 

 

 

 

 

 

이렇게 초기화 돼 있다고 치자

   this.state = {
      list: [
      {1, 휘제, '2020/02/03 03:14', '가나다라마바사', 0},
      {2, 정, '1996/05/18 03:14', 'abcdefg', 1},
      ],
    };

 

 

 

 

 

 

 

랜더 이후부터 코드이다

content에 list를 하나씩 mapping시킨다

render() {

    const content = this.state.list.map((list) => ( // 리스트를 하나씩 살펴본다
    //이제 표현 하고싶은데로 하면 됨
      <div key={list.number}> //현재 객체의 number
        <div >
          <div >
            <div >{list.nick}</div> //현재 객체의 nick
            <div > {list.time}</div> //현재 객체의 time
          </div>
          <div >
            <img src={like} width="12" height="12" className="rep_rexobtn" /> 
            <div>
              좋아요: {list.recomend} //현재 객체의 recomend
            </div>
          </div>
        </div>
        <div>{list.reple}</div> //현재 객체의 reple
      </div>
      
    ));

    return <div>{content}</div>;  //여기서 content 출력
  }

 

 

 

 

 

 

 

 

그리고 스타일좀 넣어주면

위와 같이 div가 쌓여서 출력 됨을 알 수 있다

 

 

 

 

 

!!