[React] section 6, 7

Key

리액트는 데이터의 목록을 렌더링하는데 있어서 특별한 개념을 갖는다.
리액트는 새로운 아이템을 마지막 아이템으로 렌더링하고 모든 아이템을 업데이트해서 컨텐츠를 교체한다.
-> 성능 측면에서 좋은 생각이 아님! 버그도 발생할 수 있다. 
-> 새로운 아이템이 어디에 추가되어야 하는지 리액트에게 알려줘야 하기 때문에 warning이 뜬다.

key를 사용해야 할 때 id가 없으면?
index 사용하기!
-> 특정한 아이템에 대한 인덱스가 항상 똑같고 아이템 컨텐츠에 직접적으로 첨부된 것이 아니기 때문에 버그 가능성이 여전히 존재한다.

{props.items.map((expense, index) => (
...
))}

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

 

조건부 렌더링

{filteredExpenses.length === 0 && <p>No expenses found.</p>}

&& 앞에 있는 조건식이 true면 && 다음 부분이 렌더링된다.

or

{filteredExpense.length === 0 ? ... : ...}

or

let expenseContent = <p>No Content found.</p>;

  if (filteredExpenses.length > 0) {
   ...
  }

 

Styled Components

특정 스타일이 첨부된 컴포넌트를 구축할 수 있도록 도와주는 패키지

이 스타일이 첨부되는 컴포넌트에만 영향을 미치고 다른 컴포넌트에는 영향을 주지 않는다.

 

태그드 템플릿 리터럴

const Button = styled.button``;

여기서 button은 styled 객체의 메소드

괄호 () 를 사용하는 대신 백틱을 붙인다.

-> 자바스크립트에서 지원하는 기본적인 자바스크립트 구문!

이 button 메서드는 새로운 button 컴포넌트를 반환한다.

 

모든 클래스는 고유한 이름을 갖기 때문에 앱에 있는 다른 컴포넌트에 영향을 주지 않는다.

-> styled component가 작동하는 방식!

 

동적 props 두가지 방법

1.

 <FormControl className={!isValid && "invalid"}>
 
   &.invalid input {
    border-color: red;
    background: #fad0ec;
  }

  &.invalid label {
    color: red;
  }

2.

<FormControl invalid={!isValid}>

border : 1px solid ${props => props.invalid ? 'red' : '#ccc'};

 

CSS Module

css 모듈은 그 기능을 지원하도록 설정된 프로젝트에서만 사용 가능한데

왜냐하면 브라우저에서 코드가 실행되기 전에 코드의 변환이 필요하기 때문이다.

-> 리액트 프로젝트는 css 모듈을 지원하도록 설정되어 있다.

import styles from "./Button.module.css";

<button type={props.type} className={styles.button} onClick={props.onClick}>

파일 이름도 button.module.css 로 바꿔 준다.

 

Css 모듈이 하는 일 또는 개념, 내부에서 내장된 프로세스는 CSS 클래스나 CSS 파일을 가지고 그 클래스 이름을 고유하게 바꾸는 것이다.

Css 모듈은 css 스타일의 범위가 이 파일을 import하는 컴포넌트에 한정된다는 것을 확실하게 해준다.