🍊 이번 시간에는 배열에 항목 제거하기에 대해서 알아보겠다. function UserList({users, onRemove}){ return ( users.map((user) => { return }) ) } UserList 컴포넌트를 열어주고, 여기서 onRemove를 props에서 받아와서 User 컴포넌트에 전달해준다. function User({id, username, email, onRemove}){ return ( {username}({email}) onRemove(id)}>삭제 ) } User 컴포넌트에서는 삭제 버튼을 하나 만들고 버튼을 클릭했을 때 삭제가 될 수 있도록 onClick 이벤트에 함수를 추가한다. 이 때 클릭하였을 때 특정 id를 가진 값을 배열에서 삭제해주고 싶기 때문에 위..

🎹 이번 시간에는 배열에 항목을 추가하는 것에 대해 알아보겠다. function CreateUser({username, email, onChange, onCreate}){ return ( 등록 ) } ✅CreateUser.js CreateUser 컴포넌트를 만든다. CreateUser 컴포넌트는 총 4개의 인자를 받아오는데 여기서 onChange 함수는 인풋 값이 바뀌게 될때 호출할 이벤트 함수고 onCreate는 버튼을 눌렀을 때 새로운 항목을 등록해주는 함수이다. import React,{ useRef, useState } from "react"; import "./App.css"; import CreateUser from './CreateUser'; import UserList from './Use..

🍥 이번 시간에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법에 대해서 알아보겠다. 여기서 말하는 변수는 다음과 같다. 예를 들어 컴포넌트 내부에서 let 키워드를 사용하여 어떤 변수를 선언한다고 가정해보자. 그렇게 하면 다음에 리렌더링 될 때에는 그 변수 값은 초기화 된다. 만약 계속 유지하고 싶으면 즉 어떤 값을 관리하려면 이전에 배웠던 useState를 사용해야 되는데, useState는 상태를 바꾸게 되면 컴포넌트가 리렌더링 된다. 하지만 우리는 가끔씩 어떤 값을 바꿨을 때 리렌더링 할 필요없는 그런 값을 관리하게 될 때도 있다. 그런 경우에는 useRef를 사용하면 된다. 또한 useState는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 ..

🍧 이번 시간에는 리액트에서 배열을 렌더링하는 방법을 알아보겠다. 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' } ]; 예를 들어 이런 배열이 있다고 가정한다. 배열 안에 3개의 객체가 있고, 이것을 각각 렌더링해주어야 하는데 어떻게 할까? UserList.js를 만들고 작업한다. 🍧 비효율적인 방법 function UserList(){ const users = [ { id: 1, username: 'v..

🥞 이번 시간에는 useRef로 리액트에서 특정 DOM을 선택하는 방법에 대해서 알아보겠다. HTML과 자바스크립트를 사용할 때에는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM 셀렉터 함수를 사용하여 DOM을 선택한다. 리액트에서도 가끔씩 DOM을 직접 선택해야하는 상황이 발생할 수 있다. 예를 들어, 특정 엘리먼트의 위치나 크기를 가져와야 한다던지 스크롤바 위치를 가져오거나 설정해야 한다던지, 포커스를 설정해주어야 한다던지 등 다양한 상황이 있다. 그럴때 리액트에서는 ref 라는 것을 사용한다. 🥞useRef라는 hook 사용하기 함수형 컴포넌트에서 ref를 사용하려면 useRef라는 hook을 사용한다. 그리고 클래스 컴포넌트에서는 React...

🍈이번 시간에는 input이 여러 개일 때 상태를 관리하는 방법에 대해서 알아보겠다. function InputSample(){ const onChange = (event) => { }; const handleReset = () => { }; return ( 초기화 값: 이름 (닉네임) ) } 위와 같이 InputSample 컴포넌트를 작성한다. 이렇게 보인다. 일단 지금은 값에 해당하는 이름 (닉네임) 을 수동으로 작성해 주었다. 🍈 좋지 않은 방법 input이 이렇게 여러 개 되었을 때는 단순히 useState를 여러 번 사용하여 onChange도 여러 개 만들고, 그렇게 구현을 할 수도 있는데 그 방법은 좋은 방법은 아니다. 🍈 좋은 방법 - useState가 객체를 관리하도록 하기 더 좋은 방법은..