TIL. 31 Javascript - Map()

Minjae Choiยท2021๋…„ 6์›” 30์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
2/10

๐ŸŽˆ .map(ele, key)


  • map() ๋ฐฐ์—ด ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ ๊ฐ๊ฐ์— ๋Œ€ํ•˜์—ฌ ์ฃผ์–ด์ง„ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด

let arr = [ 1, 2, 3, 4, 5] ์ผ ๋•Œ,
arr.map ( num => num + 1 )

arr์˜ ๋ชจ๋“  ์š”์†Œ๋งˆ๋‹ค num + 1์ด ์ ์šฉ๋˜์–ด ๊ฒฐ๊ณผ๊ฐ’์€ [ 2, 3, 4, 5, 6 ]์ด๋‹ค.

  • map() ๋ฉ”์†Œ๋“œ์—๋Š” key ๊ฐ’์ด ์กด์žฌํ•ด์•ผ ํ•˜๋Š”๋ฐ, key๊ฐ’์„ ์ง€์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋Šฅ์ƒ์˜ ๋ฌธ์ œ๋Š” ์—†์ง€๋งŒ ๋‚ด๋ถ€์ ์œผ๋กœ ๋‹ค์‹œ ๋ Œ๋”ํ•  ๋•Œ์— ์‹๋ณ„ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค.

  • ๋ณดํ†ต key ๊ฐ’์€ ๊ณ ์œ ํ•œ ๋ฒˆํ˜ธ๋กœ ์‹๋ณ„ํ•˜๊ธฐ ์‰ฝ๋„๋ก id ๋ฒˆํ˜ธ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

    {commentList.map((comment) => {
      return (
        <Comment
          key={comment.id}
          comment={comment.content}
          clickEvent={this.changeColor}
          name={comment.userName}
        />
      );
    })}

// ์ž…๋ ฅํ•œ ๋Œ“๊ธ€์ด ์ถ”๊ฐ€๋  ๋ฐฐ์—ด commentList์— mapping์„ ์ง„ํ–‰ํ•ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ(child) ํƒœ๊ทธ์— key ๊ฐ’์œผ๋กœ comment.id๋ฅผ ์ง€์ •ํ–ˆ๋‹ค.
// ์—ฌ๊ธฐ์„œ comment๋Š” ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์ด๊ณ , id๋Š” Data ํŒŒ์ผ์— ํ• ๋‹นํ•œ ๊ณ ์œ  ๋ฒˆํ˜ธ์ด๋‹ค.

  [{
    "id": 1,
    "userName": "wecode",
    "content": "Welcome to world best coding bootcamp!",
    "isLiked": true
  },
  {
    "id": 2,
    "userName": "joonsikyang",
    "content": "Hi there.",
    "isLiked": false
  }]

// ์œ„๋Š” mock data ์ผ๋ถ€.


๐Ÿ’ก input์—์„œ ์ƒ์„ฑ๋œ ๋Œ“๊ธ€์„ state ๊ฐ’์œผ๋กœ ๋ณด๋‚ด๋Š” ์ฝ”๋“œ

  • ์œ„์—์„œ mock data๋ฅผ ํ™œ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ํ”ผ๋“œ์— ๋„ฃ์—ˆ๊ณ , ์•„๋ž˜๋Š” ์ง์ ‘ ์ž…๋ ฅํ•œ ๊ฐ’์„ commentList์— ๋„ฃ์–ด ๋“ฑ๋กํ•˜๋Š” ์ฝ”๋“œ์ด๋‹ค.
    const newComment = [
      {
        id: this.state.commentList.length + 1,
        userName: "rious275",
        content: [this.state.iptCommentValue],
        isLiked: true,
      },
    ];

    this.setState({
      commentList: this.state.commentList.concat(newComment),
      iptCommentValue: "",
    });
    
    // ๊ณ„์†ํ•ด์„œ ์ถ”๊ฐ€๋  ๋Œ“๊ธ€์— ์ƒˆ๋กœ์šด id๋ฅผ ๋ถ€์—ฌํ•˜๊ธฐ ์œ„ํ•ด length๋ฅผ ํ™œ์šฉํ•œ๋‹ค.
    // newComment๋Š” ๊ธฐ์กด json ๋ฐ์ดํ„ฐ์™€ ์ผ์น˜ํ•˜๋„๋ก ์ž‘์„ฑํ•˜์—ฌ ์‹œ์Šคํ…œ์ด ์ธ์‹ํ•˜๋„๋ก ๋งŒ๋“ ๋‹ค.
    // ๊ณ„์†ํ•ด์„œ ์ถ”๊ฐ€๋  ๋Œ“๊ธ€ ๋ฐฐ์—ด์ธ newComment๋ฅผ ๋ณ€์ˆ˜๋กœ ์„ ์–ธํ•ด setState๋ฅผ
       ํ™œ์šฉํ•˜์—ฌ ๋Œ“๊ธ€ ๊ฐ’์„ ์ ์šฉ(newComment)ํ•˜์—ฌ commentList์— ๋„ฃ๋Š”๋‹ค.
       ๋ฐ›์€ ํ›„์— ๋‹ค์‹œ ๋Œ“๊ธ€ ์ž…๋ ฅ์ฐฝ์€ ์ดˆ๊ธฐํ™” ๋˜์–ด์•ผ ํ•˜๋ฏ€๋กœ ๋นˆ ๊ฐ’์ธ ""์„ ์ค€๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€