20203. 02. 03 코딩하면서 신기한 코드 작성

import React from "react";

import LetterItem from "./LetterItem";

import styled from "styled-components";

export default function LetterList({

  letters,

  text,

  onDeleted,

  onEdit,

  personName,

}) {

  return (

    <Section>

      <SectionTitle>{text}</SectionTitle>

      <SectionUl>

        {letters

          ?.filter(

            (letters) => !personName || letters.personName === personName

          )

          .map((filteredLetter) => (

            <SectionLi key={filteredLetter.id}>

              <LetterItem

                letter={filteredLetter}

                onDeleted={onDeleted}

                onEdit={onEdit}

              />

            </SectionLi>

          ))}

      </SectionUl>

    </Section>

  );

}

 

구현하고 싶었던 것

 

letters를 filter하는데 personName이 있으면 personName과 일치하는 리스트를 넣어주고,

없다면 그냥 전체 리스트를 반환하는 것을 만들고 싶었다.

 

처음에는 if를 넣어주어야 하나 고민을 하다가 찾아보니 OR 연산자를 많이 사용하고 있더라!!

이런 식은 처음 작성해봐서 너무 신기했다!!

 

        {letters
          ?.filter(
            (letters) => !personName || letters.personName === personName
          )
          .map((filteredLetter) => (
            <SectionLi key={filteredLetter.id}>
              <LetterItem
                letter={filteredLetter}
                onDeleted={onDeleted}
                onEdit={onEdit}
              />
            </SectionLi>
          ))}

 

💡코드 해석
letters가 있는 경우 filter를 통해 조건을 주고 ture:false 반환 , letter가 없다면 filter없이 map을 해주고 있다.
letters.filter는 letters를 받아서 personName이 없으면 true : letters.personName 과 personName이 같다면 false
위 조건에서 true인 경우는 전체 배열을 보여줄 것이고 false인 경우 false한 값을 가진 배열만 보여주도록 만들었다.

  

리스트를 사용할 일은 많음으로 다음에 꼭 또 써먹어봐야지!!!!