Sparta x 이노베이션 캠프/React (28) 썸네일형 리스트형 TIL) eventListener eventListener 클래스형 컴포넌트에서 eventListener 구독하기, mouseover 시에 색깔 바뀌게 하기 import logo from './logo.svg'; import './App.css'; import React from "react"; import Text from "./Text"; class App extends React.Component{ constructor(props){ super(props); this.state = {}; this.circle = React.createRef(null); } hoverEvent = (e) = > { console.log(e.target); // 이 이벤트가 발생한 요소가 뭔지 보여줌 console.log(this.circle.curr.. TIL) Ref Ref 은 이름표다! 클래스형 컴포넌트에서 만드는 방법 예) this.text = React.createRef(); (=텍스트에 Ref를 만들어 주자) 그러면 타겟인 "text" 가 있는 div옆에 (적용 끝) component DidMount() 로 ref 적용이 잘 되었는지 확인 해 줄 수 있다. ... this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"] }; this.text = React.createRef(); } componentDidMount() { console.log(this.text); } return ( ...중략... ); } } ... 콘솔을 보면 {current: input} 이라고 뜸. console.log(this.text.current.. TIL) React 키워드 정리 1. 자바스크립트에서 유사배열과 배열의 차이는? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까? 유사 배열은 배열처럼 보이지만 사실 key가 숫자이고 length값을 가지고 있는 객체이다. { 0: div.text, 1: div.text, 2: div.text, 3: div.text, length: 4, } 이런식으로 배열에 담기지만 객체의 성격을 갖는다. 배열의 forEach, map, filter, reduce같은 메서드를 사용할 수 없기 때문에 요소 수정방법이 다르다. Array.from() 메서드를 사용하여 변경 해야한다. Array.from()메서드는 유사 배열 객체나 반복가능한 객체를 얕은 복사를 통해 새로운 객체를 만든다. 2. 부모 컴포넌트 A와 자식 컴포넌트 B가 있다. 컴.. TIL) yarn 과 npm 정의, 차이점 yarn, npm은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자이다. 전 세계 개발자들이 자바스크립트로 만든 다양한 패키지를 npm온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 또한 패키지 버전관리, 의존성 관리도 편리하게 가능하다. npm 노드 패키지 매니저의 줄임말로 노드를 설치 할 때 자동으로 설치되는 기본 패키지 관리자이다. 역할은 1. 온라인 플랫폼. 사람들이 노드 패키지를 만들어 업로드, 공유하는 공간으로 누구나 게시된 패키지를 사용할 수 있다. 2. 명령 줄 인터페이스. 온라인 플랫폼과 상호 작용하기 위해 명령 줄 인터페이스 사용하며 패키지 설치, 제거가 가능하다. yarn yarn은 2016 페이스북에서 개발한 패키.. 이전 1 2 3 4 다음
