Sruka
399
2019-09-11 17:08:47
5
233

[react.js] 불특정한 여러 DIV 요소 삽입


react 를 이용해 여러 이미지를 삽입 할수 있는 '글쓰기' 시스템을 만들어보고 있어요.


    tr_spliter () {
        return (
            <div className="board-spliter"></div>
        )
    }


이런 식으로 함수로 묶은 요소를 

    render() {
        return (
            <div>
                {this.tr_spliter()}
                {/*.. 루프 수만큼 삽입하고 싶어요! ..*/}
                {this.tr_spliter()}
            </div>
        );
    }


이렇게 For 문을 돌리든지 해서 여러개를 파라미터(원하는 루프 횟수)에 따라 넣고 싶은데, 쉬운 방법이 있을까요?
0
0
  • 답변 5

  • John Suhr
    1k
    2019-09-11 17:39:51 작성 2019-09-11 17:40:23 수정됨

    중괄호에 for가 안들어가므로 for를 사용할 수 있는 메서드를 만드는 방법을 많이 씁니다

    const job = num => {

      let elements = [];

      for (let i = 0; i < num; i++) {

        elements.push(<div>...</div>);

      }

      return elements; 

    }

    1
  • Sruka
    399
    2019-09-11 18:02:12

    아하 배열로도 요소를 넣을 수 있었군요..  감사합니다

    0
  • moonti
    2k
    2019-09-11 18:10:29

    리액트에서 jsx에 반복된 요소 넣는거 기본 예제에요.

    0
  • LeeCoder
    82
    2019-11-25 10:29:31
    render() {
            return (
                <div>
                    {this.tr_spliter()}
                    {/*.. 루프 수만큼 삽입하고 싶어요! ..*/}
                    {this.tr_spliter()}
                </div>
            );
        }

    중괄호 부분에 for 문이 안들어가므로 ES6 문법인 map()을 많이 쓰곤합니다. 
    예를들어

    let numbers = [5, 4, 3, 2, 1];
    render() {
            return (
                <div>
                    {this.tr_spliter()}
                    {numbers.map((num, idx) =>
                      <div> {num}, {idx} </div>
                    )}
                    {this.tr_spliter()}
                </div>
            );
        }

    이런식으로 사용이 가능하며 num값은 배열에 있는 요소를 loop를 돌며 하나씩 가져오고
    idx는 해당 num의index 값 입니다.
    https://velopert.com/957 참고하실 수 있는 사이트 입니다.
    0
  • LeeCoder
    82
    2019-11-25 10:31:36

    결과값으로는

    5,0

    4,1

    3,2 

    2,3

    1,4

    가 나오겠죠?  <br/> 이 들어가 있지 않지만 구분하기 쉬우려고 결과값을 위와같이 만들었습니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.