오늘 새로 배운 것
todo list에서 카드가 추가 안되는 문제
-
문제점
리액트로 구현된 todo list에서 제목과 내용을 입력할 input 태그 및 추가버튼은 form태그에 둘러싸여 있고 추가버튼을 클릭하면 화면에 추가되었다가 순식간에 사라지는 문제 -
원인
form 태그의 성질을 제대로 이해하지 못했다. form 태그 자체가 이벤트가 완료된 후 페이지를 reloading하는 특징을 가진다. 그러므로 추가되었어도 새로고침 되므로 새로 추가한 todo list가 사라진다. -
해결방법
리액트 안에서 form 태그를 제거해주었더니 정상적으로 작동됐다.
form태그를 굳이 사용해야한다면 event.preventDefault를 사용해야한다.
파일확장자 .js 와 .jsx의 차이
기능상 동작의 차이는 하나도 없지만 리액트의 고유한 특성이 컴포넌트가 들어가는거니까 jsx라고 쓰는 게 권장됨.
자식 컴포넌트에서 태그 사이 text도 받으려면?
props.children으로 받을 수 있다.
하루를 돌아보며...
리액트 개인과제를 하면서 어느정도 구조가 눈에 들어오기 시작한 것 같다. 하지만 오늘 코드 리뷰 특강을 들으면서 css도 그렇지만 세부적인 구현 능력이 부족한 것 같다.
FE Developer