처음부터 시작하는 Java

indexOf => 원하는 항목이 몇 번째 원소인지 찾아주는 함수 // indexOf const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지']; const index = superheroes.indexOf('토르'); console.log(index); // result : 2 findIndex 배열 안에 있는 값이 숫자, 문자열, 또는 불리언일때 찾고 싶은 항목이 몇번쨰 원소인지 ? indexOf 배열 안의 값이 객체, 배열이면 ? findIndex const memu = [ { id: 1, text: '모듬회', done: true }, { id: 2, text: '삼겹살', done: true }, { id: 3, text: '탕수육', done: tr..

User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현해보자 users 배열안에 active 라는 속성을 추가해주자 App.js import React, {useRef, useState} from 'react'; import CreateUser from './components/CreateUser'; import UserList from "./components/UserList"; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const {username, email} = inputs; const onChange = e => { const { name,..

이번에는 배열에 항목을 제거 해보자 앞의 글과 계속 이어지는 중 UserList.js import React from "react"; function User({user, onRemove}) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({users, onRemove}) { return ( {users.map(user => ( ))} ); } export default UserList; User 컴포넌트의 삭제 버튼이 클릭 될 때에는 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출 해 주어야한다. 여기서 onRemove 는 "id 가 ~~~ 인 객체를..

아래와 같이 배열을 하나하나 렌더링 하는것은 노가다를 해야해서 별로 좋지 않아서 컴포넌트를 재사용 할 수 있도록 새로 만들어 보자! ** 한 파일에 여러개의 컴포넌트를 선언해도 괜찮다! 일단은 노가다 버전 UserList.js import React from 'react'; function usersList() { const users = [ { id: 1, usersname: 'velopert', email: 'public.velopert@example.com' }, { id: 2, usersname: 'tester', email: 'tester@example.com' }, { id: 3, usersname: 'admin', email: 'imAdmin@example.com' } ]; return ( ..