본문 바로가기

전체 글26

React - To Do Item 삭제 오늘은 지난 글에 이어서 To Do Item을 삭제하는 기능을 추가해보았습니다. 일단 지난 글에서 추가한 부분에 오타가 있었습니다. 오타 수정 및 삭제하는 기능을 넣은 코드 먼저 보이고 그다음 시행착오들을 적어보겠습니다. # 오늘의 작업 ToDoTemplate.js import React from "react"; import ToDoItem from "./ToDoItem"; class ToDoTemplate extends React.Component { toDoList = []; constructor(props) { super(props); this.toDoList = JSON.parse(localStorage.getItem("toDoList")) || []; // localStorage에서 toDoLi.. 2020. 3. 12.
React - To Do Item 추가 기능 오늘은 지난 글에 추가했던 ToDoTemplate에 할 일을 작성하고 입력하면 화면에 다시 보여 주도록 하는 기능을 넣어봤습니다. 작업을 위해서 사용하는 것은 LocalStorage입니다. Chrome 브라우저를 사용하고 있기 떄문에 Chrome브라우저를 기준으로 설명하겠습니다. 만들고 있는 react App을 실행 시켜 해당 페이지에서 키보드의 [F12] 혹은 상단 툴바의 Toggle버튼을 눌러 [도구 더보기 ▶ 개발자 도구]를 눌러보겠습니다. 그럼 위와 같이 개발자 도구가 나오며, Elements가 써있는 탭에서 Application을 눌러 LocalStorage를 확인해보겠습니다. Application을 누른 뒤 왼쪽 영역에 [Storage ▶ LocaStorage ▶ http://localhost.. 2020. 3. 11.
React - ToDoTemplate Component 추가 오늘은 ToDoList Component를 만들어 보았습니다. 할 일을 추가하는 form과 input, 그리고 작성된 할 일들을 보여줄 개별 item component로 구성되어 있습니다. # 오늘의 개념 사항 1. Props & State "정적인 데이터 Props, 동적인 데이터 State" Props는 정적인 데이터, 즉 컴포넌트에서 사용하는 데이터 중에서 변동되지 않는 데이터를 다룰 때 사용되는 것입니다. React에서 제공하는 예시를 보겠습니다. function sum(a, b) { return a + b; } 위의 예시는 일반적인 JavaScript 함수입니다. 위의 함수는 입력값을 바꾸려고 하지 않고 항상 변화를 주지 않은 입력값에 대해서 결과를 반환하기에, "순수 함수"라 칭합니다. 여기서.. 2020. 3. 9.
React - 시계 Component 추가 오늘은 간단하게 React 기본 내용 복습 겸 어떤 기능들을 넣어 볼지 생각을 해봤습니다. # 오늘의 React 개념 사항 1. Component "함수 혹은 Class의 형태로 HTML을 반환하는 것." Component는 React App을 만들게 되면 항상 만들게 될 React의 기본 단위입니다. 기본적으로 Component라 함은 내부적 작업을 거쳐서 HTML을 반환하는 것으로 이해됩니다. Component는 function단위, 혹은 class 단위로 작성 가능합니다. 브라우저를 통해서 볼 수 있는 결과물들은 각각의 요소 하나하나가 Component로 이루어져 있습니다. 2. JSX "JavaScript와 HTML의 결합물" 대부분이 JavaScript의 개념에 의존해서 쓰이는 React이지만,.. 2020. 3. 5.

티스토리툴바