[ React ] TODO LIST 만들기

1. Component 생성

const 이름 = () => {

}

function App() {
	return { 

	}
}

export default Component;

1. App.js에 component 불러오기

import TodoList from "./components/TodoList"

1. App.css에 스타일 설정하기

.APP {
	width: 500px;
	margin: 0, auto;  //위아래
	display: felx;
	felx-direction: column;
	gap: 10px;
	padding: 15px 0px;  //위아래
	}

1. Component 코드 작성 후 그 컴포넌트.css 를 생성하고 import “./TodoList.css” 불러오기

import “./TodoList.css”

const 이름 = () => {

}

function App() {
	return { 

	}
}
export default Component;

import “./TodoItem.css”

const TodoItem = () => {
	return (
		<div className="TodoList">
		<input type = "checkbox" />
		<div className="content">Todo...</div>
		<button>삭제</button>
	</div>	
	);
};

> css

.TodoItom button {
	cursor: pointer;
	color: gray;
}

1. Create > onCreate

새로운 투두 입력할 시 todos 값을 변경해주어야 함

따라서 setTodos로 값을 변경 → useState

• 따라서 새롭게 생길 투두 아이템을 새로운 객체 형태 { } 로 만들어주어야 함
• 객체 안의 함수 = 메서드

function App () {
	const [todos, setTodos] = useState(mockData)
	
	//usState 생성
	const onCreate = (content) => {
		cons newTodo = {
			id: 0,  // 콤마, 사용하는 이유: 객체 안의 속성들 나열
			isDone: false,
			content: content,
			date: new Date().getTime()  
		}
		
	//객체를 todos 배열에 추가
	setTodos ([newTodo, ...todos])  //spread 연산자로 데이터 불러오기
	}
	
	// state지정
	return {
	<div className="블라블라">
		<Header />
		<Editor />
		<Footer />
	</div>
}

> App

<Editor onCreate={on} />

> Editor

const Editor = ({onCreate}) => { // 구조 분해 할당
	
		const [content, setContent] = useState("");
	
		const onChangeContent = (e) => {
			setContent(e.target.value);  //인수로 전달
		}
	
	const onSubmit = () => {
		onCreate(); //인수로는 아래 input 값 사용해야하는데 
	            //input 값은 별도의 state 가 없으므로 state 만들어주기
	}
	
	return (
		<div>
			//input 추가
			<input
			value={content}
			onChange={onChangeContent}
			placeholder="새로운 Todo"
			/>
			<input placeholder="새로운 todo..." />
			<button onClick = {onSubmit}>추가</button>
		</div>
	);
};

---

< 사용한 함수 >

(1) placeholder

input( 입력 ) 칸 안에 흐리게 보이는 안내 문구

> compponent

<input placeholder="할 일을 입력하세요" />

> css

.List > input {
} // input의 스타일 조절

(2) mockData

해당 데이터의 초기값을 임시 데이터인 mockData에 넣음

• 가짜 데이터로 component 외부에 선언 가능

// mockData (가짜 데이터)
const mockData = [
  { id: 1, text: "React 배우기", checked: false },
  { id: 2, text: "자기계발 하기", checked: true },
];

function App () {
	const [todos, setTodos] = useState(mockData) // state지정
	return {
	<div className="블라블라">
		<Header />
		<Editor />
		<Footer />
	</div>
}

(3) getTime()

Data 개체에서 “시간 정보”를 가져오는 메서드

const now = new Date();        // 현재 날짜와 시간 객체 생성
const time = now.getTime();    // 밀리초 단위 시간 가져오기

console.log(time);

(4) onChangeEventHandler

입력값이 바뀔때 자동으로 반응하는 함수

태그 종류 onChange 의미

<input>	사용자가 글자를 입력할 때
<textarea>	여러 줄 텍스트 입력할 때
<select>	드롭다운에서 항목을 선택할 때
<checkbox>	체크박스를 체크/해제할 때

---

< 나오는 개념 >

(1) 괄호 안에 props 받아옴 = 구조 분해 할당 (App이 부모 요소, component가 자식 요소)

const 함수({}) ⇒

(2) useState(HOOK)

상태를 변경해주는 함수

const [value, setValue] = useState(초기값);
// 보통 초기값에는 빈 배열 [] 넣어줌