본문 바로가기
반응형

JavaScript/React27

11.useRef 로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM 을 선택해야 할 때, ref 를 사용해야 한다 함수형 컴포넌트에서 이를 설정 할 때 useRef 를 사용하여 설정 useRef Hook 은 DOM 을 선택하는 용도 외에도, 다른 용도가 한가지 더 있는데, 바로, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있음 이 변수를 사용하여 다음과 같은 값을 관리 할 수 있음 setTimeout, setInterval 을 통해서 만들어진 id 외부 .. 2021. 7. 22.
10.배열 렌더링하기 리액트에서 배열을 렌더링하는 방법 const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 이 내용을 컴포넌트로 렌더링한다면? 가장 기본적인 방법은 비효율적이지만, 그냥 그대로 코드를 작성하는 것 UserList.js import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: 'pub.. 2021. 7. 20.
09.useRef 로 특정 DOM 선택하기 JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택 리액트에서 ref 라는 것을 사용 함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현 InputSample.js import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInp.. 2021. 7. 20.
08.여러개의 input 상태 관리하기 input 이 여러개일때는 어떻게 관리해야 하는지 알아보자 InputSample.js import React, { useState } from 'react'; function InputSample() { const onChange = (e) => { }; const onReset = () => { }; return ( 초기화 값: 이름 (닉네임) ); } export default InputSample; input 의 개수가 여러개가 됐을때는, 단순히 useState 를 여러번 사용하고 onChange 도 여러개 만들어서 구현 할 수 있음 더 좋은 방법은, input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하는 것 useState 에서는 문자열이 아니라 객체 형태의 상태를 관리 Inp.. 2021. 7. 20.
반응형

티스토리툴바