분류 전체보기

deleteContent 함수 생성 App.js deleteContent(_id) { let _content = null; let _contents = Array.from(this.state.contents); for (let i = 0; i < _contents.length; i++) { if (_contents[i].id === _id) { _contents.splice(i, 1) } } this.setState({ contents: _contents, mode: 'read', selected_content_id: 0, }) } delete에서도 마찬가지로 기본 array에는 영향이 없도록 Array.from()을 사용하고 있습니다. 그리고 splice 함수를 사용하는데, splice는 JS 문법으로..

React에서 CRUD를 구현할 때, Update가 아마 가장 어려운 구현과정이 될 것 입니다. 그 이유는, props는 직접적으로 변경하는 것이 불가능하기 때문에 state를 통해서 변경해야하는 부분 기존 html과 react 문법의 차이로 인해서 update 부분이 어려운 부분이 있습니다. UpdateContent 컴포넌트 생성 UpdateContent.js import React from 'react'; class UpdateContent extends React.Component { constructor(props) { super(props); this.state = { id: this.props.id, title: this.props.title, desc: this.props.desc } thi..

js코드를 파일로 만들어서 html에 가져오는 경우에, script 선언 위치를 어디에 할지에 대한 고민이있습니다. 대부분은 body가 끝나는 부분에 선언하는 경우가 많습니다. 그 이유는 ?? 위의 코드처럼 javascript 코드를 head 부분에 선언한 경우에 어떻게 실행되는지를 설명해보면, 브라우저는 해당 html코드를 한줄한줄 해석하게 됩니다. 그러다가 script 태그를 만나, 해당 array.js라는 js파일을 다운받는 과정이 필요하고 실제로 코드에 적용하기 위해서 js파일을 실행하는 시간이 필요합니다. 그러면, 브라우저는 js파일을 다운받고 실행하는 시간동안은 나머지 HTML 코드를 parsing을 하지 못하게 되고, 유저들은 그만큼 기다리는 시간이 길어지게 됩니다. 그렇기 때문에, body..

앞선 과정에서 이미 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는 위의 두가지의 경우에서 전자에 해당하는 경우에만 사용할 수 있다는 것입니다. 하지만, 개발하..