1. 이벤트 처리하기 이벤트 : 웹 페이지에서 일어나는 사용자의 행위이다. ex) 버튼 클릭, 페이지 스크롤, 새로고침 등 이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이다. ex) 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시 function Body() { function handleOnClick() { alert("버튼을 클릭하셨군요!"); } return ( 클릭하세요 ); } export default Body; 이벤트 핸들러 표기에서 HTML은 onclick이지만 리액트는 카멜 케이스 문법에 따라 onClick으로 표기한다. Props로 전달할 값을 지정할 때처럼 onClick={} 문법으로 이벤트 핸들러를 설정한다. 이벤트 핸들러를 설정할 때는 함수 호출의 결괏..

23-24/React.js 2 2023. 11. 10. 17:39

이벤트 처리하기 이벤트란 웹 페이지에서 일어나는 사용자의 행위를 말한다. 이벤트의 예로 버튼 클릭, 페이지 스크롤, 새로고침 등이 있다. 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링은 이벤트가 발생했을 때 특정 코드가 동작하도록 만드는 작업이다. 다음은 버튼을 클릭했을 때 경고 대화상자를 브라우저에 표시하도록 만든 이벤트 핸들링의 예시이다. // Body.js function Body() { function handleOnclick(){ //함수 handleOnClick 선언 alert("버튼을 클릭하셨군요!"); // 경고 대화상자 표시하도록 함 } return ( //버튼 생성하고 클릭시 이벤트를 처리하는 이벤트 핸들러 함수 handleOnClick 호출함 클릭하세요 ); } export defaul..

23-24/React.js 3 2023. 11. 10. 10:00

5장 ref: DOM에 이름달기 public/index.html 파일의 div 태그의 id가 root로 설정되어 있습니다. 이처럼 id를 사용하면 특정 DOM 요소에 대하여 쉽게 접근하여 처리할 수 있습니다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼, 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference)입니다. 5.1 ref는 어떤 상황에서 사용해야 할까? ref는 DOM을 직접적으로 건드려야 할 때 사용해야 합니다. 예로 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아봅시다. 5.1.1 예제 컴포넌트 생성 src 디렉터리 안에 ValidationSample.css와 ValidationSample.js 파일을 생성해봅시다. /*ValidationSam..

22-23/22-23 리액트 스타터 1 2022. 11. 5. 10:00

5.1 ref는 어떤 상황에서 사용해야 할까? HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다 5.1.1 예제 컴포넌트 생성 //ValidationSample.css .success { background-color: lightgreen; } .failure { background-color: lightcoral; } //ValidationSample.js import React, { Component } from 'react'; import './ValidationSample.css'; class ValidationSample extends Component { state = {..

22-23/22-23 리액트 스타터 3 2022. 11. 5. 10:00

* ref(reference의 줄임말) : HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 5장에서는 클래스형 컴포넌트에서 ref를 사용하는 법을 공부한다. (함수형 컴포넌트에서 ref 사용 시, Hooks 사용 > 8장 ) I. ref는 어떤 상황에서 사용해야 할까? => 특정 DOM에 작업을 해야할 때 사용하는데, 특히 DOM을 꼭 직접적으로 건드려야 할 때 사용해야 한다 1. 예제 컴포넌트 생성 .success { background-color : lightgreen; } .failure { background-color : lightcoral; } import {Component} from 'react'; import './Validat..

22-23/22-23 리액트 스타터 2 2022. 11. 5. 10:00

INDEX 5장 ref: DOM에 이름 달기 1. ref는 어떤 상황에서 사용해야 할까? 1.1 예제 컴포넌트 생성 1.2 App 컴포넌트에서 예제 컴포넌트 렌더링 1.3 DOM을 꼭 사용해야 하는 상황 2. ref 사용 2.1 콜백 함수를 통한 ref 설정 2.2 createRef를 통한 ref 설정 2.3 적용 3. 컴포넌트에 ref 달기 3.1 사용법 3.2 컴포넌트 초기 설정 3.3 컴포넌트에 메서드 생성 3.4 컴포넌트에 ref 달고 내부 메서드 사용 4. 정리 ● 개념 복습 문제 ● 코드 문제 5장 ref: DOM에 이름 달기 일반적인 HTML에서 DOM 요소에 이름을 달 때는 id를 이용한다. → CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 리액트 프로젝트 내부..

21-22/21-22 리액트 스타터 -2 2021. 11. 22. 13:00

일반적으로 HTML에서 DOM에 이름을 달 때는 id를 사용합니다. id를 달면, 1. CSS에서 특정 id에 스타일 적용하기 2. 자바스크립트에서 특정 id를 작업하기. 두 가지가 모두 가능합니다. 리액트 프로젝트 내부에서 이와 같은 행동을 하기 위해서는, reference의 줄임말인 ref를 사용합니다. 5.1 ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접 건드려야 할 때' 사용합니다. .success { background-color: lightgreen; } .failure { background-color: lightcoral; } ValidationSample.css import React, { Component } from 'react'; import './ValidationSa..

21-22/21-22 리액트 스타터 -1 2021. 11. 22. 13:00

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있는데 이것이 ref(reference의 줄임말) 개념이다. 🐳 리액트 컴포넌트 안에서는 id를 사용하면 안 될까? 컴포넌트를 여러 번 사용한다고 가정할 때, HTML에서 DOM의 id는 유일(unique) 해야 하는데, 이런 상황에서는 중복 id를 가진 DOM이 여러 개 생기기 때문에 잘못된 사용이 된다. ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다. 1. ref는 어떤 상황에서 사용해야 할까? -> 'DOM'을 꼭 직접적으로 건드려야 할 때 1) 예제 컴포넌트 생성 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보자! > Validat..

21-22/21-22 리액트 마스터 2021. 11. 1. 19:10