Kani's Blog

데이터 검색(필터링) App.js에 input 태그를 하나 붙이고 이 input 태그의 값을 키워드로 검색하는 부분을 만들어보겠습니다. App.js를 다음과 같이 수정해주세요. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091// App.jsimport React, { Component } from "react";import "./App.css"; import AccountBookForm from "./components/AccountBookFor..

데이터 제거 데이터를 제거하기 위한 몇 가지 방법이 있습니다. 12345678const array = [1, 2, 3, 4, 5]; // slice로 자른 후 concat으로 붙인다.array.slice(0, 2).concat(array.slice(3, 5)); // [1, 2, 4, 5]// [...array.slice(0, 2), ...array.slice(3,5)]; // 위와 같은 내용을 전개 연산자를 이용하여 표현 // 배열에서 3이 아닌 요소만 필터링array.filter(num => num !== 3); // [1, 2, 4, 5]cs 이제 실제 파일을 위와 같은 제거 방법을 써서 추가해 보겠습니다. App.js 파일을 다음과 같이 수정하세요. 12345678910111213141516171..

React에서는 기존에 javascript에서 배열을 다루듯이 하면 안됩니다. state의 내부의 값을 직접적으로 변경해서는 안되기 때문입니다. 이를 불변성 유지라고 합니다. push, splice, unshift, pop 같은 내장 함수는 배열자체를 직접 수정하게 되므로 적합하지 않고, concat, slice, map, filter와 같이 기존 배열을 기반으로 새로운 배열을 만드는 함수를 사용해야 합니다. 불변성을 유지해야 필요한 상황에 맞게 리렌더링이 되도록 설계할 수 있고, 성능도 최적화 할 수 있기 때문입니다. 데이터 추가 기존에 만든 AccountBookForm에서 추가한 데이터를 실제 배열에 추가해 보겠습니다. App에서 제어하도록 하겠습니다. App.js 파일을 다음과 같이 수정해주세요. ..

이번 시간부터는 지난 시간까지 배웠던 React의 문법을 사용하여 간단한 가계부를 만들어 보도록 하겠습니다. 여러 게시글을 통해 점차 살을 붙여갈 것입니다. 프로젝트 설치 및 시작 우선 새로운 프로젝트를 하나 설치하고 그 곳에서 작업하도록 하겠습니다. VS Code를 실행하고 개발 서버를 시작해주세요 12345create-react-app account-book-example cd account-book-example yarn startcs 시작하겠습니다. 우선 프로젝트의 src 안에 components 디렉터리를 생성해주세요. 이제부터 생성할 컴포넌트는 이 곳에 넣도록 하겠습니다. 컴포넌트 추가 - AccountBookForm src/components/AccountBookForm.js 파일을 생성해 ..

React에는 컴포넌트가 로드될 때, 업데이트 될 때, 제거될 때 자동으로 호출되는 API가 존재합니다. 이를 React의 Life Cycle API라고 합니다. 초기 생성 API 브라우저에 컴포넌트가 나타나기 전에 호출되는 API에 대해 알아보겠습니다. - constructor(props) : 컴포넌트 생성자 함수로 컴포넌트가 새로 만들어 질 때마다 호출됩니다. - componentWillMount() : 컴포넌트가 화면에 나타나기 직전에 호출되는 API입니다. 주로 서버를 호출하는 용도로 사용되었는데 이 API를 더 필요하지 않다고 판단하여 React v16.3에서 더 이상 사용하지 않게 되었습니다. v16.3 이후 UNSAFE_componentWillMount()로 사용됩니다. 기존에 여기서 처리하..

React Component에서 다루는 데이터는 props와 state가 있습니다. props props는 자식 Component가 생성될 때 부모 Component에서 받아온 데이터로 변경이 불가능합니다. 자식 Component에서 this라는 키워드를 통해 부모 Component로부터 받은 props를 사용할 수 있습니다. src 폴더에 Card.js라는 파일을 만들고 다음과 같은 내용을 입력합니다. 12345678910111213141516171819202122232425// Card.jsimport React, { Component } from "react"; class Card extends Component { render() { return ( 이름 : {this.props.name} 소속 ..

앞서 계속 언급했던 jsx(javascript xml)를 알아보겠습니다. 컴포넌트를 만들 때 React.createElement() 함수를 사용해서 만들게 되면 다음과 같이 상당히 고통받게 됩니다. 1234567891011121314151617181920212223242526272829303132"use strict"; React.createElement( "div", { className: "App" }, React.createElement( "header", { className: "App-header" }, React.createElement("img", { src: logo, className: "App-logo", alt: "logo" }), React.createElement( "p", nul..

React 프로젝트 환경을 구축하기 위해서 node.js의 여러 라이브러리들을 이용하여 사용하겠습니다. 준비사항 React는 컴포넌트를 여러가지 파일로 분리하여 저장하고 js가 아닌 jsx라는 문법을 사용할 것입니다. - Webpack : 여러가지 분리된 파일 하나로 합쳐주는 라이브러리- Babel : jsx를 비롯한 새로운 js 문법을 사용하기 위한 라이브러리- Node.js : Webpack과 Babel 등 여러 라이브러리를 사용하기 위한 javascript 런타임- Yarn : 캐싱 시스템 등 조금 더 개선된 npm(node package manager)- Visual Studio Code : 실제 개발을 위해 필요한 에디터 (공짜) 다음 준비사항들의 설치 과정은 생략하겠습니다. CRA(create..

Front-end Framework / Library 최근 웹 애플리케이션 개발은 대부분 프론트엔드 프레임워크/라이브러리를 사용하여 만들어집니다. 그렇다면 왜 이런 프레임워크나 라이브러리를 사용할까요? 물론 프레임워크나 라이브러리를 사용하지 않고 HTML, CSS와 단순한 javascript만을 이용하여 웹 페이지를 개발할 수 있습니다. 하지만 최근의 웹은 유저의 행동에 따른 다양한 데이터 및 UI 변화를 요구하고 있습니다. 이런 부분을 프레임워크나 라이브러리 없이 한다고 하면 상당히 관리적인 측면에서 어려움을 겪을 것입니다. 이러한 이유로 웹 애플리케이션 개발에서는 프론트엔드 프레임워크/라이브러리를 채택하고 있습니다. 이 중에서 최근 핫한 3대장이 Angular, React, Vue 입니다. 개발에 필..