2023.08.23(수) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week1 Day 3 보고

• TO-DO LIST

- 34강 리스트 렌더링 - 3 - 리스트 필터링 ~ 37강 스타일링 - 3 - CSS Modules

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

리액트 컴포넌트(또는 HTML tag)를 재사용해서 map 등의 함수로 여러 개를 만들 때

각각을 구분해 주는 unique key 값이 필요하다.

​

리스트에 필터 걸어주기

리스트에 상품들을 특정 조건에 따라 필터링해서 보여주기

필터링을 할 때마다 업데이트가 되어야 한다.

(예) Filter by year

​

getFullYear()

return value: An integer representing the year for the given date according to local time.

returns NaN if the date is invalid

​

(예시 코드)

const filteredExpenses = props.items.filter((expense) => {

return expense.date.getFullYear().toString() === filteredYear;

})

​

let expensesContent = <p>값이 없습니다.</p>

// 기본값 설정 (필터링 값이 없을 때 보여줄 문구)

​

if(filteredExpenses.length > 0) {

expensesContent = filteredExpenses.map((item) =>

<ExpenseItem

title={item.title}

amount={item.amount}

date={item.date}

/>

))

}

​

리스트에 필터를 걸어주기 위해서는 state로 조건을 가지고 있고,

filter() 메서드를 사용해서 매번 state가 바뀔 때마다 업데이트를 해준다.

​

이걸 js 자체 코드로도 구현할 수 있는데(return 내부에) 삼항 연산자를 사용하면 중복 코드를 줄일 수 있다.

삼항 연산자는 따로 빼서 작성해보자 ~.~

​

- CSS 스타일링

동적인 인라인 스타일링

CSS 클래스를 동적으로 조작하기

​

- trim method

if (enteredValue.trim().length === 0) {

setIsValid(false);

return;

}

​

CSS-in-JS

자바스크립트에서 CSS를 작성하는 방식

해당 방식은 CSS를 컴포넌트 레벨로 추상화해서 관리할 수 있음

​

styled-components는 리액트 컴포넌트 스타일링을 위해 CSS를 JS로 쓸 수 있게 만든

가장 많이 쓰이는 도구 중 하나이다.

​

CSS Modules

css 스타일링을 그대로 사용하면서, 클래스 명이 겹치지 않게 hashing

고유한 class name

​

동적으로 CSS Module에 스타일링하기

<div className={`${firstStyle} ${isTrue && secondStyle}`}

​

• 부족한 점

​

• 스스로 시도해본 것들

삼항 연산자 원래 대충은 알고 있었지만, 더 확실히 알고 가면 좋을 것 같아 따로 정리해 보았다.

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고