Language/React25 [React] useRef, createRef 를 사용하는 방법 useRef 를 사용하는 방법 JS 에서는 특정 DOM을 선택하기 위해 getElementById 또는 querySelector 같은 DOM selector 함수를 사용해서, DOM 을 선택합니다. React에서도 특정 DOM을 선택해야할 때가 가끔씩 발생할 수 있습니다. 예를 들어 element의 크기나 특정 이미지를 가져와야 하거나, 스크롤바 위치를 설정하거나 focus를 설정한다거나 추가적으로 html 에서의 같은 관련 라이브러리를 사용하는 등 다양한 상황에서 DOM을 사용하기 위해서 ref를 사용합니다. 함수형 컴포넌트에서 ref를 사용할 때는 useRef라는 Hook 함수 사용 클래스형 컴포넌트에서 ref를 사용할 때는 React.createRef를 사용합니다. function InputSamp.. 2020. 12. 24. [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. 이전 1 2 3 4 5 6 7 다음
