Language76 [React] useState - Hooks 컴포넌트에서 사용하는 내용이, 사용자 interaction을 통해 값이 바뀌어야 할 때, state를 사용하는데 React의 함수형 Hooks에서 사용하려면 useState를 사용해야 합니다. useState(동적인 값)사용하기 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있습니다. 먼저 사용자 interaction에 따라 바뀔 이벤트를 설정해야합니다. 이벤트가 발생했을 때 특정 함수가 호출되려면 컴포넌트 내부에서 함수를 작성합니다. 리액트에서 엘리먼트에 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 설정해줘야 합니다. 주의해야할 점은, 함수를 그대로 넣어줘야하지, 함수를 실행.. 2020. 12. 24. [React] create 구현: form , contents 변경 form을 제작할 때는 onSubmit 을 호출해야합니다. onSubmit은 submit 버튼을 클릭했을 때, submit 태그를 포함하고 있는 form 태그에 onSubmit 이벤트를 설치해두면, 이벤트가 실행되도록 약속되어 있습니다. 이 것은 html의 form 태그가 가지고 있는 특징입니다. CreateComponent.js 목표: 이 때 사용자가 form에서 submit을 클릭했을 때, onSubmit 이벤트가 실행이 될 것인데, 이벤트가 실행되었을 때 CreateComponent를 가져다 쓰고 있는 App 컴포넌트의 contents 배열에 추가하는 것을 목표로 해보겠습니다. 해야할 것: Submit 버튼이 클릭 되었을 때, CreateContent의 이벤트가 있는 곳에서 이벤트를 실행시켜야 합니.. 2020. 12. 23. [React] mode 변경 기능, 전환 기능 mode 변경 기능 Control.js import React, { Component } from "react"; class Control extends Component { render(){ return ( create update ); } } export default Control; CRUD에서 create 기능을 만들기 위해 컴포넌트를 분리하였습니다. Control 컴포넌트로 전달될 때에는 props 형태로 전달되게 됩니다. 여기서 Control의 onChangePage로 함수가 전달되게 되는데 그 함수를 호출해주면 됩니다. App.jsx App 컴포넌트에서 이벤트 핸들러가 실행되어 onChangeMode가 실행될 때 mode를 인자로 받고 mode의 값이 현재 값으로 전달이 됩니다. 그렇게 되면.. 2020. 12. 22. [React] 컴포넌트 이벤트 만들기 - 3 이번에는 클릭한 Content가 본문에 표시되게 하려고 합니다. Content가 여러개 있기 때문에 App의 state에다가 id를 줘서 우리가 현재 선택된 Content를 표시하려고 합니다. id 값을 통해 일치하는 것을 통해 표시하려고 합니다. 만약 data의 id 값과 this.state.selected_content_id 가 일치하게 된다면 Content가 바뀌게 하겠습니다. 우선 constructor(생성자) 부분에 selected_content_id 부분을 지정해주고 TOC가 리스트이니까, onChanegePage 이벤트가 발생했을때 this.setState를 통해 mode 의 값과 함께 selected_content_id를 지정하도록 하면 됩니다. App.js import React, { C.. 2020. 12. 22. 이전 1 ··· 9 10 11 12 13 14 15 ··· 19 다음
