[React] 💻 react완벽가이드(5)

React 완벽가이드 섹션5 - 렌더링 리스트 및 조건부 Content

---

 

1. 데이터 동적으로 렌더링하기 (.map)

사용자가 데이터를 얼마나 추가할지 모르기때문에, 목록을 하드코딩하는 것은 지양해야한다. (예제에서는 expenseItem 의 수를 일일히 설정한 부분)

먼저 상위컴포넌트(App.js)에 있는 배열을 하위컴포넌트(Expenses.js)에서 렌더링하기위해 props를 통해 를 전달한다.

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] =useState('2020');

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  };
  return (
    <div>
      <Card className='expenses'>
        <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
        {props.items.map(expense => <ExpenseItem  title={expense.title} amount={expense.amount} date={expense.date}/>)}
      </Card>
    </div>
  );
};

export default Expenses;

map메소드를 이용해서 jsx구문을 리턴하도록 한다. 

 

새로 추가한 항목이 기존항목이름에 덮어씌어진채로 제일 상단에 추가되었다. 그리고 마지막 항목이름이 복사붙여넣기됨..

강의에서는 콘솔에 경고창이 떠도 제대로 실행되었지만, 나는 덮어씌어진 오류를 만나서 넘어가지못하고 고민했는데 바로 다음강의에 해결책이 있었다.   해결책은 key props 추가하기 

 

리액트는 새로운아이템을 렌더할때 div목록에 있는 마지막 아이템으로 렌더링하고 모든아이템을 업데이트해서 배열을 교체한다.

모든 상태를 확인하는 작업이기에 성능측면에서 비효율적이고, 새아이템은 이전 아이템을 덮어쓰는 버그가 발생할 수있음!

 

key추가하면 모든아이템을 식별할수 있게 되고 배열의 길이뿐아니라 아이템이 위치해야할곳을 인식

->목록의 아이템을 매핑할때는 항상 key를 추가해야함

 

2. 특정요소만 렌더링 (.filter)

filter 메서드를 이용하면 원래 배열은 건드리지않고 새로운 배열이 생성된다!

true가 되는 값을 배열로 반환 

여기서 저장된 연도는 Date 객체에서 가져왔기때문에 toString()으로 문자열로 변환해주기

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState('2020');
  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  }
  const filteredExpenses = props.items.filter(expense => {
    // console.log(expense.date.getFullYear());
    return expense.date.getFullYear().toString() === filteredYear;
  })


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

 

 

3.조건부 내용 출력하기

1)삼항연산자 이용

리턴문에 삼항연산자를 이용해서 조건부를 쓸수있다. 

{filteredExpenses.length === 0 ? (
        <p>No expense found.</p>
      ) : (
        filteredExpenses.map((expense) => (
          <ExpenseItem
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
            key={expense.id}
          />
        ))
      )}

 

2)논리연산자로 체크하기

잘안읽힌다면 논리연산자 체크활용해서 이런 방식으로 쓸수도있다. 하지만 JSX리턴구문에서 길어지는건 마찬가지

  {filteredExpenses.length === 0 && <p>No expense found.</p>}
 {filteredExpenses.length > 0 &&
        filteredExpenses.map((expense) => (
          <ExpenseItem
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
            key={expense.id}
          />
        ))}

 

3)변수로 생성하기

리턴문밖에 변수로 담아준다.

변수는 JSX코드 또는 JSX요소의 배열을 갖게되며, 두 경우 모두 렌더링 가능하기때문에  이런방식으로 사용할수 있음 

좀더 깔끔한 JSX리턴문을 만들수 있다.

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

  let expensesContent = <p>No expense found.</p>;
  if(filteredExpenses.length >0){
    expensesContent =  filteredExpenses.map((expense) => (
      <ExpenseItem
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
        key={expense.id}
      />
    ));
  }
  return (
    <Card>
      <ExpensesFilter />
     {expensesContent}
    </Card>
  );
};

 

 

---

첫번째 연습예제 끝😊

 

후반부에 컴포넌트가 많아져서 꼬이는것도 한두번이 아니였다.

헷갈려서 그려본 구조가 작업하는데 도움이 되었다.

App.js
  └ NewExpense.js
   	 └ ExPenseForm.js
  └ Expenses.js
     └ Card.js //Card 스타일 컴포넌트
     └ ExpensesFilter.js
     └ ExpensesChart.js
        └ Chart.js
     └ ExpensesList.js 
        └ ExpenseItem.js
           └ Card.js
      	   └ ExpenseDate.js

 

완성!

 

 

//REF.

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

강의를 듣고 정리한 학습노트입니다 :)