Ming's develop story

이벤트 리스너란? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것이다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다! 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해보자 이벤트 리스너를 추가하는 것을 구독한다라고 한다. 이벤트 리스너를 적용시킨 부분을 선택하고 밑에 Event Listeners를 보면 다양한 이벤트리스너의 종류들을 볼 수 있다. 컴포넌트가 사라질수도 있는데 다시 생기면 이벤트리스너도 다시 생겨난다. 지웠다 만들었다를 반복하면 한번 마우스를 올렸는데 여러번 이벤트가 되는 경우가 발생할수 있다. 그래서 컴포넌트가 사라질때에는 꼭!! 이벤트리스너를 지워..

App.js import React from "react"; import logo from "./logo.svg"; import "./App.css"; import Start from "./Start"; function App() { const [name, setName] = React.useState("우민기"); return ( ); } export default App; Start.js import React from "react"; import img from "./Teemo.png"; const Start = (props) => { console.log(props); return ( 나는{" "} {props.name} 에 대해 얼마나 알고 있을까? 시작하기 ); }; export default..

App.js 원래 작성했던 버킷리스트 코드에 '추가하기'라는 버튼을 추가해주고, addBucket 함수 추가 및 css 수정 import React from "react"; import BucketList from "./BucketList"; import styled from "styled-components"; class App extends React.Component { constructor(props) { super(props); this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; this.text = React.createRef(); } componentDidMount() {} addBucket = () => { console.log(this.te..

단방향 데이터 흐름이란? 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리이다. 왜 단방향으로 써야하지? 라이프 사이클과 함께 생각해보면 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각하고, 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 될것이다. 그리고 또 자식 컴포넌트가 리렌더링 되며 반복될 것이다. 네모 만들기 클래스형 컴포넌트 App.js import React from "react"; class App extends React.Component{ constructor(props){ super(props); this.state = { count: 3..

만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까? → 답은, 리액트 요소에서 가져온다! Ref를 하나의 이름표라 생각하면 이해하기 쉽다. 방법 1 - 클래스형 컴포넌트 중간에 value를 확인하는 방법중 하나는 밑에와 같다. 방법 2 - 함수형 컴포넌트 함수형 컴포넌트에서는 이처럼 Ref를 사용할 수 있는데 중간에 확인하는 방법으로는 setTimeout()을 활용하는 방법이다. window.setTimeout(() => { console.log(my_wrap); }, 1000); 여기서 두번째 인자(1000)의 시간이 흐른 후에 첫번째 인자에 있는 함수를 실행하도록 하는 코드이다. 밀리세컨드 기준이라 1000 = 1초