리스트 ,CSS 스타일링

• 해당 리스트에 값이 추가되고 삭제될 때마다 화면이 업데이트

• 리스트의 key

• 리스트 있고 없고

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

if(filteredExpenses.length>0){
	expensesContent=filteredExpenses.map((item)=>
		<ExpenseItem 
			title={item.title}
			amount={item.amount}
			date={item.date}
			

		/>
		

)
}

• CSS 스타일링

Const formSubmitHandler=(event)=>{
event.preventDefault();

if(enteredValue.trim()===“”){
	setIsValid(false);
	return;
}

props.onAddGoal(enteredValue)

}

1) 인라인 방식
2) 클래스네임 방식
3) CSS- in-JS

const FormControlLabel=styled.label`
	font-weight:bold;
	display:block;
	margin-bottom:0/5rem
`

<FormControlInput isValid={isValid}/>


const FormControlInput = styled.input`
	display:block;
	width:100%;
	border:1px solid #ccc;
	font:inherit;
	line-height:1.5rem;
	padding:0 0.25rem;
	${props=> !props.isValid &&
	`
	background-color:salmon;
	border-color:red;
        `}
` 

4) CSS Module

• 동적으로 CSS Module에 스타일링하기
• Css 클래스 명을 중첩되지 않게 사용할 수 있음
• 동적으로 css module을 사용하고 싶을 땐 string className처럼 사용할 수 있음