이다닷

📌useRef란? 리액트를 사용하는 프로젝트에서도 가끔 직접 DOM을 선택해야하는 상황이 발생 할 때가 있다. 그리고 video.js, JWPlayer 같은 HTML5 Video 관련 라이브러, 또는 chart.js 같은 그래프 관련 라이브러 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에 적용하기 DOM을 선택해 하는 상황이 발생할 수도 있다. => 그럴때 Ref라는 것을 사용한다! 초기 파일은 저번 시간에 완성한 MultiInput.js를 사용한다. ➡️우리가 저번 시간에 만들었던 내용은 초기화 버튼을 누르고나면 포커스가 초기화 버튼에 그대로 남아있게 된다. 우리는 Ref를 이용해서 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히게 하겠다. UseRef.js import React..

InputSample.js 파일 추가 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; ➡️input에 값을 입력하면 그 값이 하단에 나타나게하고, 초기화 버튼을 누르면 input값이 비워지도록 구현하기. 📌e.target.value을 불러오면 input에 담긴 값을 확인 할 수 있다. 📌input의 상태를 업데이트를 할때에는 value값을 필수적으로 지정해줘야한다. InputSample.js import React, {useState} from 'react'; function InputSample() { const [text, setText] = useState(""); c..

➡️ +1, -1 을 수행하는 코드 만들기 시작화면 우선 +1, -1 버튼을 클릭했을때 특정 문구를 뜨게한다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { SVGAnimatedNumber() } const onDecrease = () => { console.log("-1"); } return( 0 +1 -1 ); } export default Counter; 결과사진 이렇게 버튼이 잘 클릭되는걸 확인할 수 있다. 📌여기서 화살표 함수를 이용하는 방법을 배워볼 수 있다. const 함수명 = (변수) => { return 리턴값; }; 그리고 우리가 하고싶은 동작을 함수로 실현시킨다. 📌컴포넌트에서..