반응형 웹서비스 개발/React-App 개발17 Update, Delete 구현 UpdateContend.js import React, { Component } from 'react'; class UpdateContent extends Component { constructor(props) { super(props); this.state = { id: this.props.data.id, title: this.props.data.title, desc: this.props.data.desc } this.inputFormHandler = this.inputFormHandler.bind(this); } inputFormHandler(e) { this.setState({ [e.target.name]: e.target.value }); } render() { console.log(this.pr.. 2021. 5. 19. Create 구현 - 메소드 원본을 바꾸지 않을때 사용하는 기능. 배열의 경우 Array.from 메소드는 기존의 배열을 복제한다. 따라서 a===b는 false가 나온다. 따라서 이전에 사용했던 concat 대신 push를 사용하고 싶다면, 위의 코드를 아래와 같이 변경하면 된다. 객체의 경우 Object.assign 메소드를 사용하면 된다. 아래와 같은 연산이 가능하다. Immutable push는 원본을 바꾸고 concat은 원본을 바꾸지 않는다. 이처럼 자바스크립트의 메소드는 일관성이 떨어지는데, immutablemin.js를 사용하면 일관성있는 메소드를 사용 가능하다. 2021. 5. 19. Create 구현 - contents 변경 constructor에 아래의 코드를 추가한다. this.max_content_id = 3; 또한 this.state.mode의 create 부분을 수정한다. else if (this.state.mode === 'create') { _article = 2021. 5. 18. Create 구현 - form, onSubmit Form 폼 기능을 추가하기 위해 CreateContent의 form을 추가시켰다. import React, { Component } from 'react'; class CreateContent extends Component { render() { console.log('Content render'); return ( Create ); } } export default CreateContent; action : 데이터를 전송할 장소 method = "post" : URL의 노출을 막음. post를 사용하는것이 좋음. onSubmit = submit 버튼을 누른다면 그 해당 이벤트를 실행되도록 약속되어 있다. onSubmit 기능추가 기능 추가를 위해 App.js에 onSubmit 코드를 추가시켰다. /.. 2021. 5. 17. Create 구현 - Mode 전환 Link 사용시 주의할점 사용자들이 페이지에 방문하기 위해 미리 방문을 해두는 소프트웨어를 가지고 있다면, delete 부분도 미리 로드되어 삭제가 될 수 있다. 따라서 delete는 Link보다는 button을 사용하여 Operation 개념으로 사용하여야 한다. 새로운 Control.js 생성 App.js의 EventHandler 생성 따라서 Control.js를 적절히 수정해주었다. 중간결과 이제는 mode의 실제 기능을 추가해 보겠다. 기존의 content.js를 ReadContent.js로 변경하였다. 또한 Create 기능을 구현하기 위한 CreateContent.js를 생성하였다. 추가적으로 App.js를 수정하였다. 2021. 5. 10. Props & State 의 차이 Props : 상위 컴포넌트 > props > 하위 컴포넌트 상위 컴포넌트는 하위 컴포넌트에게 props를 통해 값을 전달해 내부의 state를 바꾸기 때문에 컴포넌트 스스로 외부에서 전달되는 props를 변경하는 것은 금지되어 있다. State : 하위 컴포넌트 > 이벤트 실행 > 상위 컴포넌트의 state 호출 > state 값 수정 하위 컴포넌트가 상위 컴포넌트를 동작시키려면 props를 전달하는 것이 아니라 상위 컴포넌트 안에 이벤트를 심고 그 안에 setState로 값을 바꿔야 한다. 2021. 5. 4. 이전 1 2 3 다음 반응형
