본문 바로가기

React

 (23)
4. Todo List 컴포넌트 기능 구현(1) 부모 컴포넌트 App() [ App( ) 밖에서 선언된 것 => 목데이터(임시데이터) ] const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createdDate: new Date().getTime(), }, { id: 1, isDone: false, content: "프로젝트 만들기", createdDate: new Date().getTime(), }, { id: 2, isDone: false, content: "Tstory 정리하기", createdDate: new Date().getTime(), } ] [ App( ) 안에서 선언된 것들 => hook(useState, useRef), 컴포넌트에 매개변수로 전달할 event] cons..
3. Todo List 기능 구현 준비하기 컴포넌트의 기능을 구현해 볼 예정이다. [ CRUD (데이터 처리의 기본 기능)에 따라 기능 구현하기 ] Create : 데이터 추가 Read : 데이터 조회 Update : 데이터 수정 Delete : 데이터 삭제 App컴포넌트 : 할 일 데이터 관리하기 Header 컴포넌트 : 오늘의 날짜 표시하기 TodoEditor 컴포넌트 : 새로운 할 일 아이템 생성 TodoList 컴포넌트 : 검색에 따라 필터링된 할 일 아이템 렌더링 TodoItem 컴포넌트 : 할 일 아이템의 수정 및 삭제 [ useState 사용하기 ] const [ todo, setTodo ] = useState( [ ] ); state 변수 todo는 할 일 관리 앱에서 데이터를 저장하는 배열이면서 동시에 일종의 데이터베이스 역할을 ..
2. Todo List 퍼블리싱 한 입 크기로 잘라먹는 React 교재를 참고하여 'Todo List' UI를 완성해보았다. 이 UI를 만들기 위한 퍼블리싱 코드를 기록해본다. //먼저 index.css 값을 정해준다. index.css body { margin: 0px; } //index.js에 임포트할 App.js를 정의한다. App.js import React from 'react'; import './App.css'; import Header from './component/Header' import TodoEditor from './component/TodoEditor' import TodoList from './component/TodoList' function App() { return ( ); } export defaul..
1. Todo List 프로젝트 준비하기 1. 프로젝트 준비하기 1)요구 사항 분석하기 오늘의 날짜를 요일, 월, 일, 연도 순으로 표시함. 할 일을 작성하는 입력폼 + '추가'버튼을 클릭하면 할 일 아이템을 생성 생성한 아이템을 페이지 하단에 리스트로 표시 키워드 검색으로 원하는 할 일만 추출 가능 리스트로 표시하는 낱개의 할 일 아이템은 일을 마쳤는지 여부를 표시하는 체크박스가 있음. + 아이템 이름, 등록 날짜, 삭제 버튼으로 이루어져 있음. 2)UI요소를 컴포넌트 단위로 나누기 Header : 오늘의 날짜를 표시 형식에 맞게 보여줌. TodoEditor : 새로운 할 일 아이템을 등록함 TodoList : 검색어에 맞게 필터링된 할 일 리스트를 렌더링함.(검색 폼이 공백일경우 필터링하지 않음.) TodoItem : 낱낱의 할 일 아이템에..
리액트의 기본 기능 )) JSX 1.JSX란? 자바스크립트와 HTML을 섞어 사용하는 문법(자바스크립트 XML, JS확장 문법) JSX문법을 이용하면 HTML 태그에서 자바스크립트의 표현식을 직접 사용가능하다. 2. JSX와 자바스크립트 표현식 - JSX에서 자주 사용하는 표현식 산술 표현식 { numA + numB } 문자열 표현식 { strA + strB } 논리 표현식 { string ( boolA || bool B ) } 사용할 수 없는 값 : 숫자, 문자열, 논리형, null, undefined를 제외한 값(사용 시 오류 발생함 => 객체 자료형의 값을 페이지에 렌더링하고 싶으면 프로퍼티 접근 표기법으로 값을 원시 자료형으로 바꿔주어야함.) import React from 'react'; import './App.css'; c..
리액트의 기본 기능 )) 컴포넌트 *개발자들은 리액트를 컴포넌트 기반의 UI라이브러리라고 소개한다. 1. 컴포넌트 만들기 (함수컴포넌트 권장) 함수컴포넌트는 화살표 함수를 사용할 수도 있음. return ( ) ; => 여러 줄로 이루어진 HTML을 반환할 때는 return문에서 반환할 HTML을 소괄호로 감싼 다음 마지막에 세미콜론을 붙임. 컴포넌트 이름은 항상 대문자로 시작. 리액트는 다른 컴포넌트를 태그로 감싸 사용함.(자식 컴포넌트를 배치한다.) 부모컴포넌트 : 다른 컴포넌트를 return문 내부에 포함하는 컴포넌트 자식컴포넌트 : return문에 포함된 컴포넌트 import React from 'react'; import './App.css'; function Header(){ return ( header ); } functio..
리액트 시작하기 1. 리액트란? 리액트는 복잡한 웹서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 라이브러리 중 하나. 리액트는 변화가 자주 일어나는 대규모 애플리케이션을 구축할 때 필요한 여러 기능을 구비함. 리액트는 페이스북 개발팀이 만들어 2013년 오픈 소스로 세상에 공개함. 2. 리액트의 3가지 특징 컴포넌트 기반의 유연성 : 중복코드를 '복사'해서 사용하는 것은 유연성을 해침. 쉽고 간단한 업데이트 : 복잡한 인터렉션을 지원하는 웹서비스 개발에 더 집중 가능함. 빠른 업데이트 : 페이지에서 변경사항이 발생하면 먼저 버추얼 돔을 업데이트 하는 식으로 변경사항을 모았다가 한 번에 실제 돔을 업데이트함. => 업데이트가 잦아도 브라우저의 성능을 떨어뜨리지 않음! 3. 브라우저의 렌더링 과정 HTML코드 ---..

티스토리툴바