동적 렌더링

1. 동적 리스트

삭제한 뒤 key 값 추가 (목록의 아이템을 매핑할 때는 반드시 key값을 추가해줘야 함.)

2. 입력한 데이터 동적으로 출력

...prevExpenses가 앞으로 오면 입력값이 뒤에 붙음

 

3. 필터에 해당되는 값들만 출력하기

반드시 map으로 돌려서 태그로 붙여줘야 값이 제대로 출력됨.

Expenses.js에는 이미 props로 넘겨 받은 데이터가 있기에 자식으로 부터 넘겨받은 filteredYear을 필터링해 맵함수 배열에 바로 집어넣음

 

4. 삭제하기

onClick={deleteTodo}으로 적고 주석처럼 따로 빼서 적으면 적용안 됨

 

5. 조건부 렌더링

5-1.

조건 1. '완료' 누르면 아래로 가고 '취소' 누르면 위로 올라가게 하기

조건 2. 버튼 글씨 완료 취소로 유동적으로 바꾸기

 

삼항연산자 쓸 때 반드시 ()붙여야함!

다른 방법

 

5-2. 버튼 여닫기

 

열기 버튼을 만들어준 뒤 상태 변화를 적용해줄 useState를 작성하고 핸들러를 작성, 조건부 렌더링 식을 짜주고 부모 컴포넌트로 내려준다.

취소 버튼을 만든 뒤 props적용

 

6. 동적 차트 만들기