본문 바로가기

React/Velopert's React

 (22)
[React] Study #12 | 배열에 항목 추가하기 제목과 같다시피 배열에 새로운 항목을 추가하는 방법을 알아보겠다! 일단, 배열에 항목을 추가할 준비를 시작해보자 CreateUser.js input 두개와 button 하나로 이루어진 컴포넌트 input의 값 및 이벤트로 등록할 함수들을 props로 넘겨받아서 사용 import React from 'react'; function CreateUser({username, email, onChange, onCreate}){ return( 등록 ) } export default CreateUser; App.js : 상태관리 import React,{useRef} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUse..
[React] Study #11 | useRef 로 컴포넌트 안의 변수만들기 💡이전의 ref? 특정 DOM을 선택해야할 때 사용 함수형 컴포넌트에서 이를 설정 할 때 useRef를 사용하여 설정함 💡ref의 또다른 용도 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음 useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않음. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 가능 어떤 값을 관리할 수 있을까? setTimeout, setInterval을 통해 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 💡해볼것? 배열에 새 항목을 추가할때, 새항목에서 사용할 고유 id를 관리하..
[React] Study #10 | 배열 렌더링, key의 중요성 💡IDEA 그냥 코드를 작성 (따로 정리하지 않겠음, 재사용할 수 없어서 ㅜ ) 한파일에 여러개의 컴포넌트 선언 1️⃣ 배열이 고정적일 경우, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법 (정적인 배열) import React from 'react' function User({user}) { return( {user.name} {user.age} ) } function UserList() { // 렌더링을 위한 배열 const users = [ {id: 1, name: 'John', age:19}, {id: 2, name: 'Car', age:20}, {id: 3, name: 'lee', age:14}, ]; return ( ) } export default UserList 2️⃣ 동적인 배열을..
[React] Study #9 | useRef 로 특정 DOM 선택하기 리액트를 사용할 때, 가끔식 DOM을 직접 선택해야하는 상황이 발생할 수 있다. ex) 특정 엘리먼트의 크기를 가져와야 할 경우 ex) 스크롤바 위치를 가져오거나 설정해야할 경우 ex) 포커스를 설정해야할 경우 이럴 경우, 리액트에서 ref라는 것을 사용한다! 💡useRef? 함수형 컴포넌트에서 ref를 사용할 때 사용하는 Hook 함수 이번에 구현할 것? 전에 만들었던 inputSample에 초기화 버튼을 누르면 이름 input에 포커스가 잡히도록 하는 기능! import React, {useState, useRef} from 'react' // useRef 선언 function InputSample() { const [inputs, setInputs] = useState({ name: '', nick..
[React] Study #8 | 여러개의 input 상태 관리하기 (useState) 이번엔 input이 여러개일 경우 어떻게 관리해야하는지 알아보자! 구현해볼 것은 이름과 닉네임을 입력하면 값 옆의 부분에 같이 입력이 되고, 초기화를 시키면 이름과 닉네임이 모두 초기화! 💡Idea input의 개수가 여러개가 됐을 때는, 단순히 useState를 여러번 사용하고 onChange도 여러개 만들어서 구현할 수 있다. 하지만, 좋지 않은 방법! input에 name을 설정하고 이벤트가 발생했을 때, 이 값을 참조 + useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주기 더 좋은 방법! import React, {useState} from 'react' function InputSample() { const [inputs, setInputs] = useState({ // 문자열이..

티스토리툴바