[React 완벽 가이드] section 5 : 렌더링 리스트 및 조건부 Content

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

67.  모듈 소개

• Outputting Dynamic Lists Of Content
• Rendering Contend Under Certain Conditions

68.  데이터와 렌더링 목록

• JSX 코드에서 map 함수를 사용하여 동적인 구문을 실행해보도록 하자. 
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {props.items.map((expense) => (
          <ExpenseItem
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
        {/* <ExpenseItem
          title={props.items[0].title}
          amount={props.items[0].amount}
          date={props.items[0].date}
        />
        <ExpenseItem
          title={props.items[1].title}
          amount={props.items[1].amount}
          date={props.items[1].date}
        />
        <ExpenseItem
          title={props.items[2].title}
          amount={props.items[2].amount}
          date={props.items[2].date}
        />
        <ExpenseItem
          title={props.items[3].title}
          amount={props.items[3].amount}
          date={props.items[3].date}
        /> */}
      </Card>
    </div>
  );

69. State 저장 목록 사용

• 초기 expenses data 를 state 를 넣어 사용해보자.

  const [expenses, setExpenses] = useState(DUMMY_EXPENSES);

  const addExpenseHandler = (expense) => {
    // setExpenses([expense, ...expenses])
    setExpenses((prevExpenses) => { // more saftey method! 
      return [expense, ...prevExpenses];
    });
  };

70. "keys" 이해하기

• 고유 식별자가 있을 경우, 리액트는 모든 아이템들을 식별할 수 있고, 배열의 길이 뿐만 아니라 item이 위치해야 할 곳까지 인식한다. 더 효율적으로 업데이트 할 수 있다. 
• 목록의 item을 맵핑할 때는 항상 key를 추가해야 한다. 

→ key 가 없을 때는 새로운 item element가 생성되지 않고, 기존의 item 에서 title, amount, date 의 변화가 일어났다. 

 

71.  연습하기 : List 다루기

• 년도에 맞춰서 필터링 되도록 List 를 구현해보자

const Expenses = (props) => {
  const [filteredYear, setFilterYear] = useState("2020");
  // const [filteredExpense, setFilteredExpense] = useState(props.items);

  const filterChangeHandler = (selectedYear) => {
    setFilterYear(selectedYear);
    // const result = props.items.filter(
    //   (expense) => expense.date.getFullYear() == selectedYear
    // );
    // setFilteredExpense(result);
  };

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

  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {filteredExpenses.map((expense) => (
          <ExpenseItem
            key={expense.id}
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
      </Card>
    </div>
  );
};

export default Expenses;

→ 주석 부분은 미리 연습해봤던 것. 훨씬 간단하게 구현하는 방법이 있었군!..🤫 

 

73. 74. 75. 조건부 내용 출력하기

• 헤당되는 년도 item이 없을 경우 없다는 메시지를 표시해줘야 한다. 

  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {filteredExpenses.length === 0 && <p>No expenses found.</p>}
        {filteredExpenses.length > 0 &&
          filteredExpenses.map((expense) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          ))}
      </Card>
    </div>
  );

  let expensesContent = <p>No expenses found.</p>;
  if (filteredExpenses.length > 0) {
    expensesContent = filteredExpenses.map((expense) => (
      <ExpenseItem
        key={expense.id}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      />
    ));
  }
ㄴ
  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChangeHandler}
        />
        {expensesContent}
      </Card>
    </div>
  );

→ 삼항연산자, &&연산자, 변수 사용등의 여러 방법이 존재한다. 가독성의 차이

77.  데모 앱: 차트 추가하기 

• Chart component 추가
• ChartBar component 추가

78. 동적 스타일 추가하기 

const Chart = (props) => {
  let barFillHeight = "0%";

  if (props.max > 0) {
    barFillHeight = Math.round((props.value / props.maxValue) * 100) + "%";
  }

  return (
    <div className="chart-bar">
      <div className="chart-bar__inner">
        <div
          className="chart-bar__fill"
          style={{ height: barFillHeight }}
        ></div>
        <div className="chart-bar__label">{props.label}</div>
      </div>
    </div>
  );
};

79.  마무리 및 다음 단계

• ExpensesChart component 추가
• for in / for of 찾아보기

80.  작은 버그 수정

• 값 추가 시 amout가 숫자가 아닌 문자열로 추가되고 있으므로 + 를 사용하여 숫자 변환이 가능해지도록 수정

---

https://www.udemy.com/course/best-react/