[React] Udemy 강의 노트 5

 

 

 

모듈 소개

- 목록과 조건부 컨텐츠를 어떻게 렌더링 하는지 알아보기

- 페이지에서 데이터 배열을 출력하고 다양한 조건에서 다양한 컨텐츠 보여주기

 

 

데이터의 렌더링 목록

- 배열의 요소별로 하나씩 expense 아이템을 렌더링 하기

- JSX코드에서 자바스크립트를 실행하기 위해 JSX코드 안에 {} 중괄호를 사용

- 표준 자바스크립트 배열 메소드인 .map() 메소드

- map은 다른 배열을 기반으로 새로운 배열을 생성하는데, 원본 배열에 있는 모든 요소들을 변환한다.

- 이 변환 작업을 적용하기 위해 함수 형태로 함수가 실행되면 배열의 모든 아이템에 map 을 호출해 새로운 배열에 추가한다.

- JSX코드의 일부로 JSX요소의 배열을 가졌다면 리액트는 JSX요소를 나란히 렌더링 할 것이다 ([<Card/>, <Card/>, <Card/>])

 

State 저장 목록 사용

- 스프레드 연산자는 객체 뿐만 아니라 배열에도 적용할 수 있다.

- 이전 상태의 스냅샷에 의존해서 상태를 업데이트 한다면 상태 업데이트 함수에 인자로 매개변수로 함수를 전달하고 그 함수가 자동으로 최신 상태의 스냅샷을 받게 된다.

 

"keys" 이해하기

- 리액트는 데이터를 렌더링 하면서 리액트가 발생할 수 있는 어떤 성능 손실이나 버그 없이 효과적으로 데이터 목록들을 업데이트 하고 렌더링할 수 있도록 보장하기 위해 존재한다.

- key 값이 없다면 불필요한 재렌더링 과정이 필요하다. 그렇다면 성능 이슈나 버그가 발생할 수 있다.

- 리액트에게는 아이템이 비슷해보이기 때문에 key 값이 없다면 경고가 뜨고, 리액트는 새로운 아이템이 어디에 추가되어야 하는지 리액트에게 알려주지 않아 헷갈릴 수 밖에 없다.

- key props는 어떤 컴포넌트에도 추가할 수 있다. 

- key 를 추가하면 리액트가 개별 요소를 감지할 수 있다.

- 데이터에 개별 고유 id 값이 없다면 index를 사용할 수 는 있다.

 

조건부 내용 출력하기

- 배열을 렌더링 할 때 배열이 비었을 때  비었다고 말하는 필터를 걸어본다.

- if 대신 삼항연산자를 이용할 수 있다.

- 첫 번째 조건에 만족했다면 앤드 연산자 다음 부분으로 이동해서 그 값을 반환할 것이다. 이것은 표현식을 짧게 만들어준다.

{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}
        />
    ))
}

- 변수에 JSX 코드를 저장할 수 있다. 이 경우에는 반환하기 전에 if 문을 사용할 수 있다.

- 다양한 접근 방법으로 깔끔한 코드를 만들 수 있다.

 

동적 스타일 추가하기

- 스타일을 추가할 때는 style={{backgoundColor: red}} 처럼 카멜 케이스로 써야한다.

 

마무리 및 다음 단계