hmk run dev

더 많은 이벤트리스너를 알고 싶다면 구글링 >> eventlistener mdn 검색 리액트 event는 Ref 먼저 잡아주는 것 필수! 1. App 이라는 div에 ref 먼저 잡아주자 this.div = React.createRef(); 2. 그리고 적용 3. 함수만들기 hoverEvent = (e) => { //이벤트를 e 파라미터로 줘서 그것을 타겟으로 뭔가를 잡아와야함 console.log(e); console.log(e.target); e.target.style.background = "#eee"; //e로 타겟을 잡아주고 스타일> 백그라운드 hover효과 }; 4. 컴포넌트디드 마운트에서 등록 componentDidMount() { this.div.current.addEventListener..

클라이언트가 입력한 값을 받아올 수 있는 인풋박스 만들기 > 클래스형 컴포넌트라면 constructor안에 this.text = React.createRef(); Ref변수 만들기 > 인풋 박스안에 ref 달아주기 > Ref 값(인풋의 value값) 가져와서 state 업데이트 해주기 여기선 함수를 만들어 주는게 좋다(참고로 constructor 밖에선 const 필요) > setState + 스프레드문법으로 state 안의 배열에 새로운 배열을 추가 함으로써 버킷리스트 추가 가능 스프레드 문법 > [...배열이름, 추가하고 싶은 배열이나 요소] 이렇게 써주면 배열값을 하나하나 나열하고 거기에 요소를 더 해줄주어 새로운 배열을 만들 수 있다 class App extends React.Component {..

useState()를 사용한다! 함수형 컴포넌트를 하나 만든다 >> export App.js에서 import 근데 개인적으로 왜 배열을 for문 같이 돌려주냐를 생각해봤다 const nemo_count = Array.from({ length: count }, (v, i) => i); 이렇게 카운트의 숫자를 배열길이로 가진 배열을 하나 만들고 아래 처럼 맵을 사용해서 for 반복문 처럼 돌린다// 즉 유기적으로 count 스테이트 값을 이용해 반응형? 으로 만들기 위함 이라고 생각한다 {nemo_count.map((q, idx) => { // for문이랑 비슷 [0,1,2]인 배열을 num이란 요소로 돌려버리고 idx는 순서값을 나타나게함 idx가 3이니까 대충 3번 돌려준단 말 같다 return ( 뷰만..