react

앞선 과정에서 이미 Read기능을 실현했기 때문에, 이번에는 Create기능을 구현할려고 합니다. CRUD기능을 구현하기 위해서 우선, 해당 버튼을 클릭했을 때, create, update, delete 기능이 가능하도록 구현할려고 합니다. Control 컴포넌트 생성 App.js this.state = { mode: "Read", selected_content_id: 0, header: {title: 'WEB', subject: 'WORLD WIDE WEB'}, welcome: {title: 'Welcome', subject: 'Hello, React'}, contents: [ {id: 1, title: "HTML", desc: "HTML IS ..."}, {id: 2, title: "CSS", des..

전 포스팅에서는 props와 state를 이용해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것을 해봤습니다. 그러면, 하위 컴포넌트에서 상위 컴포넌트에 영향을 주는 것은 불가능한가?? 이벤트를 발생시켜 영향을 주는 것이 가능합니다. list 목록을 만들어서, 클릭을 할 때 해당 리스트의 내용을 화면에 보여주는 이벤트를 만들어 볼려고 합니다. 우선 list를 만들어 보겠습니다. 리스트 컴포넌트 추가하기 app.js this.state = { header: {title: 'WEB', subject: 'WORLD WIDE WEB'}, contents: [ {id: 1, title: "HTML", desc: "HTML IS ..."}, {id: 2, title: "CSS", desc: "CSS IS ..

저번 포스팅에서는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 사용했습니다. 여기서 주목할 점은 props는 오직 읽기만 가능한 값이라는 것입니다. React 공식 document에서는 두개의 코드를 예로들어 설명하고 있습니다. 값의 변경없이 읽기로만 사용되는 경우 function sum(a, b) { return a + b; } 함수가 실행되더라도 a와 b의 값에는 영향이 없습니다. 값의 변경이 있는 경우 function withdraw(account, amount) { account.total -= amount; } 함수가 실행되면 account.total의 값이 변경이 됩니다. props는 위의 두가지의 경우에서 전자에 해당하는 경우에만 사용할 수 있다는 것입니다. 하지만, 개발하..

저번 포스팅에서는 새로운 component를 생성했었는데, App과 Header 컴포넌트 사이에는 아무런 연관도 없이 각자가 독자적인 코드였는데, 동적인 페이지를 만들기 위해서는 서로간 데이터를 주고 받을 수 있어야 합니다. 그것을 할 수 있게 도와주는 것이 props입니다. props는 상위 컴포넌트에서 하위 컴포넌트로 값을 보내고 싶은 경우 사용이됩니다. 즉, 저번 component 생성하기에서 만들었던 App컴포넌트로부터 Header 컴포넌트로 값을 보내고 싶은 경우 App.js import React from 'react'; import Header from './components/Header'; import logo from './logo.svg'; import './App.css'; func..

일단 React의 전체적인 흐름을 파악하기 위해서, index.html, index.js, app.js 파일을 살펴보겠습니다. index.html index.html이 실제로 브라우저에 보여지는 화면인데, 파일안에는 아무 컨텐츠도 존재하지 않습니다. 그런데도, react의 로고나 링크같은 것이 보였던 이유는 태그 때문입니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root'..

React 프로젝트를 생성하는 것에는 여러가지 방법이 있는데, 이번에 해볼 것은 create-react-app을 이용해서 생성하는 방법입니다. node.js 설치 create-react-app 설치 react 새 프로젝트 생성 여기서 create-react-app이란 React프로젝트를 설치하고 실행하는데 필요한 패키지라고 생각하면 된다. npm은 nodeJs package manager로써 nodeJs로 만들어진 여러 프로그램들을 쉽게 검색, 설치, 업데이트, 삭제등을 CLI명령어로 쉽게 가능하도록 도와준다. node.js를 설치하는 이유는 node.js에 npm이 포함되어 있기 때문에 npm을 설치하기 위한 과정입니다. create-react-app 설치 npm install -g create-rea..