리액트 탄생 배경
리액트 사용 이유
- UI 컴포넌트를 만들고 재사용 하는데 매우 용이합니다.
1. UI 컴포넌트를 만들기
2. 만들어진 컴포넌트를 통해 사용자와 인터렉션
3. 화면을 업데이트 하는데 최적화
과제
1. vanilla js로 할 일 목록 만들기
우선 index.html 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>할 일 목록 만들기</title>
<link rel="stylesheet" href="Todo.css" />
</head>
<body>
<header>
할 일 목록
</header>
<main>
<form class="form">
<input type="text" class="form-input" placeholder="할 일을 입력하세요"/>
<button type="submit">추가</button>
</form>
<ul class="form-list">
<!-- 작성한 리스트 추가 -->
</ul>
</main>
<script src="script.js"></script>
</body>
</html>이것은 기본적인 코드로 뼈대를 잡았습니다.
다음은 강사님의 코드를 참고했지만 최대한 혼자 이해하고 하나씩 console 찍어보면서 해본 script.js
// 할 일 목록 만들기
// 내가 생각한 프로세스
// input칸에 입력 -> 추가 버튼을 누르면 입력한 목록값이 <ul>안에 <li>생성 ->
// 목록값에 삭제버튼도 같이 생긴다. -> 삭제버튼을 누르면 <li>가 사라진다.
// 각 id별 변수 설정
const form = document.querySelector(".form");
const input = document.querySelector(".form-input");
const list = document.querySelector(".form-list");
// form에서 "submit" 하면 입력한 값을 받아 addTask함수 실행
form.addEventListener("submit",(e)=>{
e.preventDefault();
console.log(input.value);
const task = input.value
addTask(task);
})
function addTask(task){
const taskItem = document.createElement("li");
// createElement로 li 태그 생성
taskItem.classList.add("task-item");
// taskItem의 li 태그에 클래스명 추가
taskItem.textContent = task;
// li 태그에 task값 입력
list.appendChild(taskItem);
// taskItem값을 list안의 자식으로 추가
const deletebutton = document.createElement("button");
// button 태그 생성
deletebutton.textContent = "삭제";
// button안에 "삭제" 입력
taskItem.appendChild(deletebutton);
// taskItem안의 자식 부분에 deletebutton 추가
}
list.addEventListener("click", (e)=>{
if(e.target.tagName === "BUTTON"){
deleteTask(e.target.parentElement);
};
})
function deleteTask(taskItem){
list.removeChild(taskItem);
}어떤식으로 해야할 지 처음엔 한글로 작성을 해보았고, 한글로 작성한 동적인 부분들을 코드로 하나하나씩
작성해나갔습니다.
코드를 짜면서 자바스크립트를 잘해야 리액트도 잘한다라는 말씀도 들었던 기억이 났고 왜그런지 알 수 있었습니다.
역시 기본을 탄탄하게 해야하는데..! 아직 많이 부족하네요 ㅎㅎ
그래도 직접 console로 어떠한 값을 나타내는지 확인하고 코드를 짠 다음 원하는 결과가 나왔을 때 정말 기분이 좋더군요!
ele.classList.add
document.createElement() : 태그 생성
element.appendChild(): 자식부분에 추가
과 같은 문법들도 어떻게 사용하는지 알게되었고 앞으로도 자주 사용하게 될 것 같았습니다.
물론 옆자리에 앉은 정수님한테 엄청 많은 도움을 받았다는 사실 ㅎㅎ.. 진짜 모든 코드 거의 다
질문하면 받아주시고 너무 감사해요 ㅠㅠ 덕분에 완성한 To Do List !
심지어 github commit 할 때도 어떻게 할지도 도움받고 같은조가 되었다는게 저에겐 정말 행운이라고 생각합니다 ㅎㅎ
앞으로도 팀원분들과 더 친해지고 많이 배워나갈 수 있도록 해보겠습니다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'[유데미x스나이퍼팩토리]' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 리엑트 기초2 (0) | 2023.06.23 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - JavaScript 기본 (1) | 2023.06.16 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - CSS 활용 (0) | 2023.06.15 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 웹표준과 HTML5 (0) | 2023.06.13 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 서비스 기획3 (0) | 2023.06.11 |
