반응형 프로그래밍 개발/ReactJs11 ReactJs - 배열을 다루는 CRUD 구현 배열을 다루는 CRUD 구현 생성과 렌더링 리액트애서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다. 이를 불변성 유지라고 하는데, push, splice, unshift, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 적합하지 않는다. 그 대신에, 기존의 배열에 기반하여 새 배열을 만들어내는 함수인 concat, slice, map, filter 같은 함수를 사용하면된다. App.js import React, { Component } from 'react'; import PhoneForm from "./components/PhoneForm"; import './App.css'; class App extends Component { id =2 state = { information.. 2021. 1. 7. ReactJs - input input PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.value }) } render() { return ( {this.state.name} ); } } export default PhoneForm; App.js import React, { Component } from 'react'; import PhoneForm from "./components/PhoneForm"; import './App.css'; class App extends Componen.. 2021. 1. 6. ReactJs - LifeCycle API LifeCycle API 이 API 는 컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다. 컴포넌트 초기 생성 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들이 있다. constructor constructor(props) { super(props); } 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출한다. componentDidMount componentDidMount() { // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 } 이 API는 컴포넌트가 화면에 나타나게 됐을 때 호출.. 2021. 1. 6. ReactJs - props 와 state props 와 state 리액트 컴포넌트에서 다루는 데이터는 props, state 이 두개로 나뉜다. props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다. 반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. props 아래와 같이 새 컴포넌트를 만든다. Name.js import React, { Component } from 'react'; class Name extends Component { render() { return ( Hi My name is {this.props.name} 입니다. ); } } export default Name; 자신이 받아온 pro.. 2021. 1. 5. ReactJs - JSX 기본 JSX가 적용되기 전에는 파일에서 JSX 를 사용하려면, 꼭 React 를 import 해주어야 한다. import의 예시 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; 이렇게, import 를 하는 것은, 우리가 webpack 을 사용하기에 가능한 작업이다. 이렇게 불러오고나면 나중에 프로젝트를 빌드하게 됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게 된다. 컴포넌트의 JSX의 예시 class App extends Component { render() { return ( Hi ji seok To get started, edit src/App.js and save to relo.. 2021. 1. 5. ReactJs - Update , Delete기능 구현하기 Update , Delete기능 구현하기 1. Update 구현 App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent" import Subject from "./components/Subject" import Control from "./components/Control" import CreateContent from "./components/CreateContent" import UpdateContent from "./components/UpdateContent" //UpdateContent.js 추가 연동 impor.. 2021. 1. 4. ReactJs - Create 기능 구현 Create 기능 구현 1. mode 전환 기능 App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent" //추가 import Subject from "./components/Subject" import Control from "./components/Control" import CreateContent from "./components/CreateContent"//추가 import './App.css'; class App extends Component { constructor(props){ super(props); t.. 2021. 1. 4. ReactJs - 이벤트 이벤트 리액트는 사용자와 상호작용하는 애플리케이션의 핵심인 이벤트를 리액트에서 구현하는 방법이 있다. 이벤트 state props 그리고 render 함수 App.js import React, {Component} from 'react'; import Subject from "./component/Subject" import TOC from "./component/TOC" import Content from "./component/Content" import './App.css'; class App extends Component { constructor(props){ super(props); this.state = { mode: 'TEST1', //추가 TEST1:{title:'TEST1', desc:.. 2020. 12. 31. ReactJs - state state React는 컴포넌트를 외부에서 조작할 때는 props를 내부적으로 상태를 관리할 때는 state를 사용한다. 기본 state의 개념 App.js mport React, {Component} from 'react'; import Subject from "./component/Subject" import './App.css'; class App extends Component { constructor(props){ //class안에서는 constructor의 함수는 생성자 함수이다. super(props); //super 메소드는 App 자신의 부모 Component에게 props라는 인자를 넘겨준다. this.state = { // super 메소드 이후 나오는 this도 부모의 함수안의 th.. 2020. 12. 31. ReactJs - 컴포넌트 제작하기 컴포넌트 제작하기 컴포넌트를 제작하기 전 아주 간단한 pure.html 라는 파일을 pubilc 폴더 안에 만들어 주었다. pure.html WEB Hi, My name is jin seok. HTML CSS Javascript HTML HTML is HyperText Markup Language. pure.html 부분에서 부분만 리액트에 컴포넌트 적용시켜보고자 한다. WEB Hi, My name is jin seok. 일단 src 폴더 안에 있는 App.js 파일을 열어 컴포넌트를 제작한다. App.js import React, {Component} from 'react'; import './App.css'; class App extends Component { //자바스크립트의 class 함수라고 .. 2020. 12. 30. React.js - 리액트 개발 환경 구축하기 리액트 개발 환경 구축하기 1. node.js에 들어가 node.js 프로그램을 다운로드한다. 최신 버전보다는 안정화 버전을 다운받는 것이 좋다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 명령 프롬프트를 실행하여 npm과 react.js을 구축한다. npm -v을 입력하고 엔터를 친다. npm install -g create-react-app@2.1.8을 입력하고 다시 엔터를 치면 npm이 다운로드되어 깔린다. 이제 react을 설치할 준비가 되었으므로 create-react-app을 써주어 언터를 누르면 구축 준비가 된다. 이제 바탕화면에 react.. 2020. 12. 30. 이전 1 다음 반응형
