리액트 동적으로 컴포넌트 만들기!

동적으로 컴포넌트 만들기

• JSX 내에서 {} 중괄호 열고 JS코드로 작업한다
• 배열로 받아올 경우, JS의 map을 활용해, 각 원소를 컴포넌트로 대체해서 반환한다.

{props.item.map((expense) => ( //비용 배열 원소에 따라 동적으로 컴포넌트 생성
          <ExpenseItem
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}

단, 이렇게 사용했을 때

Each child in a list should have a unque ‘key’ prop. 이라는 경고 메시지가 뜸

key == id 유니크한 id를 설정해주는 prop

• 커스텀 컴포넌트, html 엘리먼트 모두 가능하다.
• 위처럼 map으로 컴포넌트를 동적으로 만들었을 때의 문제점. 새로 컴포넌트가 추가됐을 때, 리액트는 이미 만들어진 div까지 모두 렌더링하고, 그후 새로 추가된 div를 렌더링한다. 이는 성능 부분에서 떨어지고, 비슷한 div가 많아 리액트는 개별 div를 인식하기 어려워진다.
• 따라서 key 프로퍼티를 통해 id를 생성해야 한다. 그럼 update한 div를 명확히 인식할 수 있음!

즉, map을 활용해 컴포넌트를 만들 때는 key={}를 꼭 해주기~

filter 메소드 활용

const yearFilteredExpense = props.item.filter((expense) => {
    return expense.date.getFullYear().toString() === filteredYear;
  });

• expense에는 props.item의 배열 원소가 하나씩 들어간다.
• return 에는 필터 조건을 건다.
• 그럼 자동으로 필터링된 배열이 변수에 할당ㅋ!

이후 JSX에서 map 메소드에 위 변수를 넣어주면 끝..

**{yearFilteredExpense.map(**
          (
            expense //비용 배열 원소에 따라 동적으로 컴포넌트 생성
          ) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          )
        )}

조건부로 콘텐츠 노출하는 법.

• 조건에 따라 콘텐츠를 노출.
• JSX에 if나 for문은 잘 안 씀대신 3항 연산자를 쓴다. JSX는 삼항연산자도 벅찬가봐..

방법1. JSX에 3항 연산자로 작업

**{yearFilteredExpense.length===0 ? <p>No Result</p> :
        yearFilteredExpense.map(**
          (
            expense //비용 배열 원소에 따라 동적으로 컴포넌트 생성
          ) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          )
        )}

방법2. JS && 연산자로 작업 : 조건식 && 조건식이 true면 실행

{yearFilteredExpense.length===0 && <p>No Result</p>}
        {yearFilteredExpense.length> 0 && yearFilteredExpense.map(
          (
            expense //비용 배열 원소에 따라 동적으로 컴포넌트 생성
          ) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          )
        )}

방법3. 위로 로직을 다 빼버리기. 변수에 컴포넌트 할당해서 JSX 간단하게 하기. (가장추천

**let expensesContent = <p>No Result</p>;**

  **if (filteredExpense.length > 0) {
    expensesContent = expensesContent = filteredExpense.map(
      (
        expense //비용 배열 원소에 따라 동적으로 컴포넌트 생성
      ) => (
        <ExpenseItem
          key={expense.id}
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
        />
      )
    );
  }**

  return (
    <>
      <Card className="expenses">
        <ExpenseFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        **{expensesContent}**
      </Card>
    </>
  );
}

동적으로 STYLE 추가

• JSX 내에서 stype 요소를 추가하려면 이중으로 중괄호를 해줘야 한다. style={{ key: value }}
• 결국 JS 객체로 넘어감.
• 하이픈이 없을 경우 따옴표 없이 써도 되지만, 하이픈이 있을 경우 작은따옴표로 문자열 처리를 하거나, 카멜 케이스로 변경해야 한다.