# Event

65개의 포스트
post-thumbnail

React | 세상 간단하게 모달창 만들기 (라이브러리 X)

위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa

3일 전
·
1개의 댓글
post-thumbnail

JS 이벤트 버블링과 캡처링, 위임

이벤트가 발생하면 이벤트가 발생한 가장 안쪽 요소가 '타깃 요소(event.target)'가 됩니다.이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려갑니다. 이벤트는 트리를 따라 내려가면서 addEventListener(..., t

4일 전
·
0개의 댓글
post-thumbnail

[daily study] jQuery 이벤트

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.🌷 jQuery는 이벤트와 관련해서 편리한 기능을 제공한다.👉 코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해 주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. 이런

6일 전
·
0개의 댓글
post-thumbnail

[daily study] 문서 로딩

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.🌻 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.👉 코드의 실행결과는 null이다.

6일 전
·
0개의 댓글
post-thumbnail

[daily study] 이벤트_폼

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.form태그에 적용된다.👉 예제는 전송전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다.event.preventDefault(); / 전송을 취소하는 명령이다.

6일 전
·
0개의 댓글
post-thumbnail

[daily study] 기본동작의 취소

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.웹브라우저의 구성요소들은 각각 기본적인 동작방법을 가지고 있다.텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.폼에서 submit버튼을 누르면 데이터가 전송된다.a태그를 클릭하면 hre

6일 전
·
0개의 댓글
post-thumbnail

[daily study] addEventListener()

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록 할 수 있다.👉 이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.👉 sw

7일 전
·
0개의 댓글
post-thumbnail

[daily study] 이벤트_프로퍼티 리스너

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.👉 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.\*본 글은 생활코딩 프로퍼티 리스너 페이지에서 이론적인 내용을 가져

7일 전
·
0개의 댓글
post-thumbnail

[daily study] 이벤트_inline

\*본 글은 생활코딩 강의를 듣고 복습을 위해 작성되었습니다.input type="button" onclick="alert('Hello world');" value="button" /👉 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리

7일 전
·
0개의 댓글
post-thumbnail

addEventListener와 함수

addEventListener와 함수

2020년 11월 16일
·
0개의 댓글
post-thumbnail

JavaScript | event target과 currentTarget의 차이점

이 글에서는 React onClick 이벤트 상황에서 event.target과 event.currentTarget의 차이점을 정리해본다.흔히 쓰는 event.target은 이해할 수 있다. 다만 currentTarget과 다른 점은 무엇일까?MDN 문서를 먼저 빠르게

2020년 11월 15일
·
0개의 댓글
post-thumbnail

리액트 처음부터 다시하기.7

이때까진 App.js에서 이벤트를 주고싶은 태그안에 직접 이벤트를 작성하고 함수를 할당 했다.하지만 실전에서 우리가 사용하게 될 모습은 조금 다르다.이벤트를 주고싶은 컴포넌트는 말그대로 컴포넌트 형식으로 다른 파일에 작성되어 있을 것이며,우린 한 페이지 안에 다른페이지

2020년 11월 15일
·
0개의 댓글
post-thumbnail

리액트 처음부터 다시하기.6

여기 아주 기본적인 이벤트가 하나 있다. 아주 기본적이면서 우리가 웹에서 스크롤 다음으로 많이 하는 클릭 이벤트다.작성 할 때에는 이벤트종류 = 실행 할 함수 를 써주게 된다. 위의 함수는위 사진의 WEB 이라는 글자로 된 링크를 '클릭' 하면 경고창을 띄우는 함수다.

2020년 11월 13일
·
0개의 댓글
post-thumbnail

리액트 처음부터 다시하기.5

event 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이

2020년 11월 13일
·
0개의 댓글
post-thumbnail

React: Props, State, and Event

리액트 ㅋ

2020년 11월 8일
·
0개의 댓글
post-thumbnail

ALV Data_changed

사용자가 ALV에서 값을 변경한다거나 어떤 행동을 한뒤 엔터를 치거나 다른 셀을 클릭하면 타는 이벤트 (+ 펑션 사용하지 않고 Number 체번하기)

2020년 10월 26일
·
0개의 댓글
post-thumbnail

TIL | Props & Event

Props props: properties(속성) 컴포넌트의 속성값 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. Props 객체 위에

2020년 10월 25일
·
0개의 댓글
post-thumbnail

ALV 툴바 버튼 Add & Exclude

행추가, 행삭제 버튼을 따로 만들어줬으므로 변경 모드시 보여지는 Standard 행추가, 행삭제 버튼은 보이지 않게 한다.

2020년 10월 22일
·
0개의 댓글

[ React : State, Props, Event (실습) - 2. event 발생을 통한 state 변경 ]

Event & setState > event로 state 상태 속성 변경해주기 요소에서 onClick event 발생 this.handleColor, 즉 현재 component(state)의 handleColor 함수 실행 handleColor 함수 실행 시 se

2020년 10월 18일
·
0개의 댓글

[ React : State, Props, Event (실습) - 1. state 활용 ]

State 활용App.js : constructor에서 지정한 state 상태 속성{ color }을 render 함수의 input의 value 값에 접근하여 inline style로 받아왔다. 즉 "red" State(객체 그 자체)의 객체 속성을 이용하여 객체

2020년 10월 18일
·
0개의 댓글