😇 12/12 내배캠 React 30일차

🐜 오늘 할 일

• 리액트 강의
• Todo-list 만들기
• 원장님 특강

---

📆 계획표

시간	내용	결과
9:00 ~ 13:00	리액트 강의	⛈
14:00 ~ 18:00	Todo-list만들기 (복습)	⛈
18:00 ~ 21:00	원장님 특강	⛈

---

👩🏼‍🌾 오늘의 줍줍 " " 🌾🌾

 

 

투드의 새로운 내용을 추가했을 때

input테그에 써있는 텍스트를 없애려면 어떻게 해야하는가?

→ setState(””) : input에 onchange가 일어날때마다(=event가 일어남) 함수를 넣어 ‘’로 만들어 준다.

event안에 있는 target의 value의 값이 input창에 무언가를 입력한 값이다.

handleSubmitClick이 발동했을 때, 값(value)을 초기화 해주면 된다.

써야하는 메서드는 setTitle과 setContents

setTitle("");

setContents("");

제목과 내용에 아무것도 안했는데 todolist에 추가가 되지않게 하기 어떻게?

→ input창에 텍스트 입력 후 클릭 값이 일어났을 때만 행동하게 해라.

const handleSubmitClick = (event) => {
event.preventDefault();

if (!title) {
	 alert("제목을 입력해주세요!");
	return;
} 

if (!)contents {
	 alert("내용을 입력해주세요!");
	return;
}
};

 

filter vs map

• filter : 골라낸 값만을 반환한다. 조건에 맞는 것만 가져온다. undefined따윈 없다
• map : 무조건 결과를 반환한다. undefined으로 라도 넣어서 넣은 값을 반환한다

ex) const testArr = [1,2,3,4,5];

const mappedArr = testArr.map((똥) ⇒ { 
	return item * 2;
});

//2,4,6,8,10

const mappedArr = testArr.map((똥) ⇒ { 
	if(item !== 2) {
	return item * 2;
	}
});

//2,undefined,6,8,10. -> 5개를 map하면 undefined를 넣어서리도 5개 출력

const filteredArr = testArr.filter(x => x==2);
// 1,3,4,5. -> undefined는 넣지 않고 5개가 아닌 filter에 적용 된 4가지 숫자만 나온다

* onclick,onchange 등 event적인 생각을 가지고 코드를 봐야한다

취소, 완료 버튼

export vs export default의 차이

default : 자동적으로, 자연스럽게라는 사전적 뜻.

react는 컴포넌트의 조각으로 이루어짐. 그래서 export해야 import해서 서로 연동하여 사용함

export : 중요한 컴포넌트는 아닌데 내보내긴 해야해

export default : default는 뒤에 있는 애가 대표 함수라는 것을 알려주는 것이다. 즉, 하나의 컴포넌트만 쓸 수 있다.

ex)

export default = Mon;

export default = Dad; // 이렇게 하면 오류가 뜬다. default는 여러개 보낼 수 없다.

export default = Mom;

export = Dad; // default가 하나만 있을 때는 사용가능하다.

" 원장님 유튜브 영상을 30번이든 50번이든 무조건 외워서 혼자 완성할 수 있을 정도로 반복하기 "

링크 : https://www.youtube.com/watch?v=vMA85keOI-w