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

* 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에서 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