2024. 06. 07 (금) 6주차 - Daily Coding - Day05

 

 

 

34강

리스트에 필터 걸기

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

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

값이 없으면, 없다는 문구를 나타낸다

 

getFullYear

- 년도만 추출할 수 있는 명령어

 

필터 걸기 방법 1.

import React, {useState} from 'react';

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import "./Expenses.css";
import ExpensesFilter from './ExpensesFilter';

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

	const filterChangeHandler = (selectedYear) => {
		setFilteredYear(selectedYear);
	};

	const filteredExpenses = props.items.filter((expense) => {
		return expense.date.getFullYear().toString() === filteredYear;
	});
	
	let expenseContent = <p>값이 없습니다.</p>

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


	return (
		<Card className="expenses">
			<ExpensesFilter
				selected={filteredYear}
				onChangeFilter={filterChangeHandler}
			/>
			{expenseContent}
		</Card>
	);
};

export default Expenses;

 

 

필터 걸기 방법 2.

import React, {useState} from 'react';

import ExpenseItem from "./ExpenseItem";
import Card from "../UI/Card";
import "./Expenses.css";
import ExpensesFilter from './ExpensesFilter';

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

	const filterChangeHandler = (selectedYear) => {
		setFilteredYear(selectedYear);
	};

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

	return (
		<Card className="expenses">
			<ExpensesFilter
				selected={filteredYear}
				onChangeFilter={filterChangeHandler}
			/>
			{filteredExpenses.length > 0 ?
				filteredExpenses.map((item) => (				
					<ExpenseItem
						title={item.title}
						amount={item.amount}
						date={item.date}
					/>
			)) : <p>값이 없습니다.</p>}
		</Card>
	);
};

export default Expenses;

 

 

35강

동적인 인라인 스타일링

빈 Input으로 값을 입력하면 배경색이 빨강으로 바뀐다.

 

trim 

: removes the leading and trailing white space and line terminator characters from a string

// 공백도 빈 메서드로 인식하게 만들어 줌.

import React, { useState } from 'react';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    if(event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    // 값이 '' 인 경우 배경을 빨강색으로 변경한다.
    if(enteredValue.trim().length === 0) {
      setIsValid(false);
      setEnteredValue("");
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  console.log(isValid);

  return (
    <form onSubmit={formSubmitHandler}>
      <div className="form-control">
        <label>목표</label>
        <input type="text"
        onChange={goalInputChangeHandler}
        style={{backgroundColor: isValid ? "transparent" :'salmon', borderColor: isValid ? "#CCC" : 'red'}}/>
      </div>
      <Button type="submit">목표 추가하기</Button>
    </form>
  );
};

export default CourseInput;

 

 

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

- 인라인 스타일링을 CSS 클래스를 사용해서 바꿔주기

import React, { useState } from 'react';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    if(event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    // 값이 '' 인 경우 배경을 빨강색으로 변경한다.
    if(enteredValue.trim().length === 0) {
      setIsValid(false);
      setEnteredValue("");
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  console.log(isValid);

  return (
    <form onSubmit={formSubmitHandler}>
      <div className={`form-control ${!isValid ? 'invalid' : ''}`}>
        <label>목표</label>
        <input type="text" onChange={goalInputChangeHandler}/>
      </div>
      <Button type="submit">목표 추가하기</Button>
    </form>
  );
};

export default CourseInput;

.form-control {
  margin: 0.5rem 0;
}

.form-control label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.form-control input {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  font: inherit;
  line-height: 1.5rem;
  padding: 0 0.25rem;
}

.form-control input:focus {
  outline: none;
  /* background: #fad0ec; */
  border-color: blue;
}


.form-control.invalid input {
  background-color: salmon;
  border-color: red;
}

 

 

36강

CSS-in-JS

styled-components 사용하기

 

동일한 스타일을 styled-components로 변경하기

import React, { useState } from 'react';
import {styled} from 'styled-components';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const goalInputChangeHandler = event => {
    if(event.target.value.trim().length > 0) {
      setIsValid(true);
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    // 값이 '' 인 경우 배경을 빨강색으로 변경한다.
    if(enteredValue.trim().length === 0) {
      setIsValid(false);
      setEnteredValue("");
      return;
    }
    props.onAddGoal(enteredValue);
  };
  
  console.log(isValid);

  return (
    <form onSubmit={formSubmitHandler}>
      <FormControl>
        <FormControlLabel>목표</FormControlLabel>
        <FormControlInput type="text" onChange={goalInputChangeHandler} isValid={!isValid}/>
      </FormControl>
      <Button type="submit">목표 추가하기</Button>
    </form>
  );
};

export default CourseInput;

const FormControl = styled.div`
  margin: 0.5rem 0;
`

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

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;
    `}
`;