반응형 리액트 (React)/State, EventListener3 React Event Listener React Event Listener - 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. - 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다. - 리액트는 컴포넌트가 실행되고 제거되기 때문에 리스너 또한 제거되기 전 반드시 해제해 주어야 한다. - 아래의 페이지에서 이벤트 리스너의 종류를 참고하자. 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 예시 - 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있다. - 이곳에서는.. 2021. 9. 2. State 관리 - 함수형 컴포턴트 (useState, React Hooks) React Hooks - 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있다. 1. Nemo.js 생성 import React from "react"; const Nemo = (props) => { // 반환할 리액트 요소가 없을 때는 null을 넘겨준다. // 처음 껍데기 잡으실때도 null을 사용 return null; } export default Nemo; 2. App에서 Nemo.js 불러오기 import React from "react"; import Nemo from "./Nemo.js" class App extends React.Component { constructor(props) { super(props); }; componentDidMoun.. 2021. 9. 1. State 관리 - 클래스형 컴포넌트 (setState) 단방향 데이터 흐름의 중요성 - 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다. - 라이프 사이클과 연관지어 생각해보면, 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. - 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해보자. - 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되면서, 또 다시 자식 컴포넌트가 리렌더링 된다. - 무한루프에 빠지게 된다. 클래스형 컴포넌트에서 state 관리 - setState() 사용 - 아래 네모 예제를 통해 관리하는법을 보자. Count 숫자만큼 네모칸을 화면에 띄우기 1. state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기 impo.. 2021. 9. 1. 이전 1 다음 반응형
