WINK-(Web & App)/React.js 스터디 (77) 썸네일형 리스트형 [2024 React.js 스터디] 이서영 #5주차 리액트 입문 (10장~16장) 10. useRef로 특정 DOM 선택- 리액트 사용시 DOM을직접 선택해야 하는 상황 발생ex) 특정 엘리먼트의 크기 가져오기, 포커스 설정, 외부 라이브러리 사용 ...등등- ref 사용: 함수형 컴포넌트에서 ref 사용시 useRef( Hook 함수 ) 사용: 클래스형 컴포넌트 -> 콜백 함수 / React.createRef 함수 사용 초기화 버튼 클릭했을 때 이름 input에 포커스 잡히도록 useRef 사용 -> 기능 구현 InputSample.jsimport React, { useState, useRef } from 'react';function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: .. [2024 React.js 스터디] 박지민 #5주차 "리액트 입문 10-16" 10. useRef 로 특정 DOM 선택하기- JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택- 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생ex) 특정 엘리먼트의 크기를 가져올 때, 스크롤바 위치를 가져오거나 설정해야될 때, 포커스를 설정해줘야 될 때 등추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 DOM에다 적용- 그럴 땐, 리액트에서 ref 사용 함수형 컴포넌트에서 ref .. [2024 React.js 스터디] 박건민 #5주차 10. useRef 로 특정 DOM 선택하기우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 선택한다.리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때, ref를 사용한다. 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용한다.useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다.Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 된다.아래 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출했다. InputS.. [2024 React.js 스터디] 정호용 #5주차 "React.JS 활용하기" 리액트 기본 지식을 이용하여 다양한 기능들을 살펴보자10장. useRef로 특정 DOM 선택하기JavaScript 사용 시, 우리가 특정 DOM을 선택해야 하는 상황에서는getElementById나 querySelector 같은 DOM Selector 함수를 이용해서 DOM을 선택한다.(여러분 아직 기억하고 계시죠...?) 물론, 리액트에도 DOM을 선택해야 하는 상황이 온다.또한,Video.js 나 JWPlayer 같은 HTML5 Video관련 라이브러리D3, chart.js같은 그래프 관련 라이브러리등의 외부 라이브러리를 쓸 때에도 특정 DOM에 적용하기 때문에 결국에는 DOM을 선택해야 하는 상황이 오기 마련이다.그떄는, 리액트에서는 ref라는 걸 쓴다. 함수형 컴포넌트에서는 ref를 쓸 때는 us.. [2024 React.js 스터디] 이서영 #4주차 리액트 입문 1. 리액트는 어쩌다가 만들어졌을까?DOM을 변형 : DOM Selector API를 사용, 특정 DOM선택 -> 특정 이벤트가 발생하면 변화를 주도록 설정만약 인터랙션이 자주 발생하고 이에 따라 동적으로 UI를 표현해야된다면 관리하기가 힘들어짐DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움-> Ember, Backbone, AngularJS 등의 프레임워크가 만들어짐 - 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해줌 (업데이트 작업을 간소화 해줌) -> 리액트의 개발 - 어떠한 상태가 바뀌었을 때, 업데이트를 어떻게 할 지 규칙을 정하는 것 X - 그냥 다 날려버리고 처음부터 새로 만든다는 아이디어로부터 시작 -> 하지만 모든 걸 다시 새로 만들면 속도가 느림 .. [2024 React.js 스터디] 한승훈 #4주차 1. React는 어떻게 만들어졌을까React는 사용자와의 인터랙션이 있는 페이지를 위해 만들어졌습니다.요소의 관리가 더욱 편해집니다.2. 개발 환경과 시작개발 환경을 갖춘 후,npx create-react-app new-reactcd new-reactyarn start를 통해 바로 localhost로 실행이 가능합니다.3. 컴포넌트 만들기컴포넌트 상단에는import React from ‘react’ //리액트를 사용할거라는 의미하단에는 export default FileName // FileName이라는 이름으로 타 파일에서 접근할것임을 명시합니다.이를 FileName.js에 작성하고,App.js에서 FileName.js를 import해서 사용하는 것입니다.import React from 'react'.. [2024 React.js 스터디] 류상우 #4주차 01. 리액트는 어쩌다 만들어졌을까?JavaScript를 사용해 HTML로 구성한 UI를 제어할 때, 특정 DOM을 선택한 후 어떤 이벤트가 발생했을 때 변화를 주도록 설정한다.다음은 HTML과 JS로 만든 간단한 카운터이다.0 +1 -1const number = document.getElementById('number');const increase = document.getElementById('increase');const decrease = document.getElementById('decrease');increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1;.. [2024 React.js 스터디] 김지나 #4주차 "리액트 1~9" 01. 리액트는 어쩌다가 만들어졌을까?- 처리해야 할 이벤트, 관리해야 할 상태값, DOM이 다양해질수록 업데이트를 하는 규칙도 복잡해짐 -> Ember, Backbone, AngularJS 등의 프레임워크: 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결, 업데이트 작업 간소화- 리액트는 어떠한 상태가 바뀌었을 때, DOM을 업데이트 하는 규칙을 정하는 것이 아니라 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여주면 어떨까? 라는 아이디어에서 시작함.=> DOM을 어떻게 업데이트 해야 할지에 대한 고민을 하지 않아도 됨! 하지만 모든걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느려질 것 ==> Virtual DOM 사용 Virtual DOM: 브라우저에 실제로 보여지는 D.. 이전 1 ··· 4 5 6 7 8 9 10 다음
