23.02.03-23.02.09 주특기 입문 주차 / React, todo-list 제출 완료, 복습
주간 일정
2월 3일(금) ~21시 S.A과제 회원가입 html 만들고텍스트, 배포
2월 9일(목) 10시-12시 입문주차 퀴즈
2월 9일(목) ~21시 개인 입문주차 과제 제출(todo) / 2월 8일 완료
2월 9일(목) ~21시 팀 과제 노션 작성 제출
Todo-List
추가 구현 내용
➕ 제목이나, 내용이 없을 경우 입력하라는 알람 뜨게하기
➕ id값을 0, 1, 2과 같은 숫자로 넣을 경우 add, delete를 반복하다보면 id값이 겹치게 되니 다른 방법 고려해보기
→ random을 사용하면 된다는 로직은 알고 있으나, 컴포넌트 분리가 안된 상황이라 추가하기가 어렵게 느껴짐..!
복습(1)
const [title, setTitle] = useState("");title이라는 변수를 선언하고, 그 변수의 수정값을 setTitle으로 선언해준다.
클릭할때 useTitle를 사용해 해당 값을 받아준다.
useTitle 내부에는 초기값이 들어간다.
복습(2)
<input
type="text"
value={title}
onChange={(event) => {
setTitle(event.target.value);
}}
/>앞서 정의해준 setTitle을 onChange의 값으로 정의.
e.target.value에서 e의 경우 파라미터 즉, 매개변수를 의미한다.
e.target은 특정이벤트가 발생하는 태그를 의미한다.
즉, e.target.value는 input에 입력되는 값을 가리킨다.
복습(3)
<div className="todos-container">
{todos.map((todo) => (
<div className="todo" key={todo.id}>
{todo.title}
</div>
))}
</div>초기 선언해주었던 값들의 배열인 todos를 map함수를 이용해 전체적으로 확인
key={todo.id}와 {todo.title}를 이용해 입력했던 내용을 받고, 선언했던 id값을 불러온다.
금일 회고
JS와 비슷한 부분이 많지만 역시나 다르기 때문에 다른 부분은 계속 예제로 반복하고, 반복하면서 머리에 익히는게 중요한것 같다고 생각된다.
시간이 남는다면 다른 강의나 유튜브, 자료등 찾아보면서 확실하게 하고 가기
