[WEB]/React9 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. React - React App 만들기&비우기 이번 글은 React 프로젝트를 처음으로 만들고 프로젝트를 시작하기 좋게 백지화시키는 작업을 해보겠습니다. 먼저 cmd를 켜고 원하는 디렉터리 경로에서 다음의 코드를 입력해서 프로젝트를 생성하겠습니다. npx create-react-app [AppName] 위의 코드를 입력하면 npm을 통해 필요한 패키지들을 설치하며 프로젝트를 생성합니다. 텍스트 편집기로 VisualStudio Code를 사용하고 있어 다음의 코드를 입력해 VSCode를 실행시키겠습니다. code my_day 생성된 React app을 실행시켜 보겠습니다. VSCode내에서 터미널을 사용할 수 있기때문에 그걸 이용하겠습니다. 프로젝트의 경로에서 다음의 코드를 입력합니다. npm start 터미널에서 성공적으로 컴파일을 진행한 뒤, 2개.. 2020. 3. 4. 이전 1 2 3 다음
