이렇게 우리의 지출 목록 위에 연도별로 아이템을 분리할 수 있는 filter를 달아뒀다. 이제 이게 작동되도록 해보자
이 연도 필터는 <Expense>컴포넌트에서 관리하고 있다.
간단하게 연도를 기준으로 expense 배열의 props.item을 필터링 해주면 할 수 있다.
우리는 이미 <ExpenseItem>에서 props.item을 사용하고 있으므로, state를 변경하지 않아도 된다. 왜냐하면 사용가능한 expenses의 목록은 필터에 영향을 받아서는 안되기 때문이다. filter를 건다고 해서 expenses 배열의 정보가 제거된다는 의미가 아니기 때문이다. 대신 화면에 보여지는 아이템의 수를 제한하고 싶다는 것이다.
<Expense> 컴포넌트에 새로운 변수를 하나 만들어 준다.
filter메소드가 호출하는 모든 expenses를 저장하는 상수이다.
새로운 filteredExpenses 변수를 만들어주고 props.item에 filter를 걸어준다.
filter()는 배열을 필터링하는 또다른 내장메소드이다. 이 메소드에는 함수를 전달할 수 있는데, 이 함수가 true를 반환하면 특정 아이템은 남겨지고 false를 반환하면 남지 않는다.
filter는 새로운 배열을 반환한다. 원래의 배열에 추가되지않고 대신 완전히 새로운 배열을 반환한다. 원래의 배열을 건드리지 않는다. 필터링했다고 데이터를 잃어버리면 안되기때문에 아주 중요한 포인트이다
일치하는 연도의 date를 체크하기 위해 expense.date를 불러준다. 위의 Expenses 함수에서 state를 설정해준 filteredYear는 문자열로 설정되어 있고 우리의 date는 날짜 객체로 정해져 있다.
date 객체는 getFullYear를 호출할 수 있다. -> date에서 4자리수 연도를 가져온다
이 표현식은 필터에서 선택한 연도와 같은 경우 true를 반환하고 아니면 false를 반환한다.
이렇게 변수에 담아준 날짜 필터를 <ExpenseItem>컴포넌트에 달아준다.
props.items.map이 었던 부분을 filteredExpenses라는 변수로 바꿔준다.
# 조건부 내용 출력하기
지금은 모든 필터를 선택할 수 있고, 그 연도 필터에 따른 값들이 알아서 출력된다. 아직 연도별로 데이터가 들어 있지 않은 애들을 선택했을 때 적절한 문구가 보여지도록 만들어보자
Conditional content : 다양한 상황에서 다양한 출력값을 렌더링 하는 것. 무엇이던지 개발자가 원하는 내용을 랜더링해준다.
컨텐츠를 조건부로 랜더링 하는 법 : JSX 코드로 동적인 표현식을 추가하고 조건문을 넣어준다.
{ }안에는 if문이나 for문처럼 긴 구문을 넣을 수 없다.
대신 삼항 또는 조건부 표현식을 사용해서 filteredExpenses.length가 0인지 알아볼 수 있다. length가 0이라는 소리는 어떤 데이터도 안에 들어있지 않다는 뜻!
length가 0이면 No Expenses Found를 띄어주고, else 부분에는(지출 목록에 아이템이 있다면) 아이템들을 띄워주는코드를 작성해준다.
{condition ? 조건만족할때 : else(조건이 만족하지 않을때) }로 넣어줄 수 있다.
하지만 이렇게 하면 코드의 가독성이 좀 떨어진다. 대신 자바스크립의 && 오퍼레이터를 사용할 수 있다.
새롭게 코드를 분리해준다.
filteredExpenses.length === 0 이라는 첫번째 조건이 만족했다면 && 연산자 다음에 나오는 내용을 리턴한다.
filteredExpenses.length > 0 이라는 조건을 하나 더 만들어서 독립적으로 코드를 작성해준다.
하지만 위의 두 가지 방식도 JSX 에서는 과한 코드가 될 수도 있다.
다른 방법으로는 변수를 추가하는 방식이 있다.
어떤 아이템도 없을때 뜰 태그를 변수에 담아준다. 그리고 if문을 돌려주는 것.
filteredExpenses.length > 0 이 성립된다는건 지출 목록안에 아이템이 있다는 뜻이니 변수에 담은 저 태그를 map으로 돌려서 채워주면 된다.
그리고 return 부분에는 JSX 문법으로 {expensesContent } 넣어주면 코드가 실행된다.
#조건부 내용 추가
지출내용을 적는 Form을 접었다 필 수 있도록 기능을 완성해보자
form은 <ExpenseForm> 컴포넌트고 NewExpense 컴포넌트에서 랜더링되고 있다. 그 위에 form을 활성화 시킬 수 있는 <button>을 만들어준다.
이 버튼이 클릭되면 Form이 보여야하고, 그 폼이 전송되거나 취소되면 버튼이 보여져야 한다. 이렇게 상태가 변화하는걸 봐서, 우리는 state가 필요하다는걸 알 수 있다.
<button>을 만들어준다
새로운 상태 업데이트를 위해서 useState를 만들어준다. 이 useState의 초기상태는 false로 넣어준다. true가 되었을때 form을 사용할 수 있도록 만들 것이기 때문이다
그리고 startEditingHandler라는 변수를 만들어 상태를 true로 바꿔줄 수 있는 Handler를 추가해준다.
그리고 버튼에 조건부내용을 추가해준다.
위에서 만든 isEditing의 상태가 false면 버튼이 뜨고, isEditing이 true이면 form이 뜨도록 만들어준다.
첫번째 코드에서는 isEditing이 false일때 버튼이 뜬다. 두번째 코드에서는 isEditing이 true일때 지출작성 form이 뜨도록 한다.
<ExpenseItem>컴포넌트에서 form을 취소할 수 있는 cancel 버튼도 만들어준다.
하지만 form을 컨트롤하는 기능은 다시 <NewExpense>컴포넌트로 돌아와 만들어준다.
calcel버튼이 클릭되면 다시 isEditing상태를 false로 만들어 주는 것이다.
그리고 이 포인터를 ExpenseForm 컴포넌트에 props로 전달을 해준다.
onCancel이라는 이름은 마음대로 지으면 된다.
그리고 우리가 만들었던 cancel버튼에 onClick 프롭스로 넘겨준다.
또한 폼이 제출되고 난 뒤 폼을 닫기위해서 setIsEditing을 false로 바꿔준다.
# 조건 명령문 반환 추가하기
<ExpenseList>컴포넌트를 만들어 아이템이 있을때랑 없을때를 나눠주는 기능을 분리시켜준다.
여기에서는 <ExpenseItem>컴포넌트를 사용하고 있기 때문에 import 해줘야한다.
filteredExpenses는 더이상 존재하지 않기 때문에 props.item을 대신 넣어준다.
<Expense>컴포넌트로 돌아가 우리가 방금 만든 <ExpenseList>컴포넌트를 return 부분에 추가해준다.
그리고 items라는 props를 넣어주고 filteredExpense를 받아준다.
<ExpensesList>파일에서 <ul>태그를 만들어서 <ExpenseItem>을 maping 했던 부분을 JSX로 불러와준다.
동적인 화면으로 렌더링해주는 작업이다.
if문에서 map으로 돌려줬던 부분은 <ul>태그 안에 넣어준다.
그리고 윗 부분에 if문을 다시 만들어 주는데, 이 부분은 Found no expenses가 뜨는 부분으로, 아이템이 없는 경우 이 문구가 뜨도록 if문을 넣어주는 것이다
이부분을 위한 if 문CSS를 위한 className도 붙여준다.
이렇게 if문으로 Found no Expenses 부분을 처리했으니 위에서 만들었던 ExpensesContent 변수도 삭제할 수 있게 된다.
<ExpenseItem>컴포넌트에서도 <li> 태그로 전체 컴포넌트들을 감싸준다. 외관상 변한건 없지만 의미상으로는 더 나아졌다고 할 수 있다.
댓글