Web Tech/react (21) 썸네일형 리스트형 react 기본 - 11.배열 항목 제거 배열 항목 제거 불변성을 지키면서 특정 원소를 배열에서 제거하기 위해서 filter 배열 내장 함수를 사용하는 것이 편하며, filter는 특정 조건이 만족하는 원소들만 추출하여 새로운 배열을 만들어줍니다. UserList.js import React from 'react'; const User = ({user, onRemove}) => { return( {user.username} "{user.email}" onRemove(user.id)} type="button">삭제 ) } const UserList = ({users, onRemove}) => { return ( {users.map(user => ( ))} ) } export default UserList; App.js import React, {.. react 기본 - 10.배열 항목 추가 CreateUser.js import React from 'react'; const User = ({user}) => { return( {user.username} "{user.email}" ) } const UserList = ({users}) => { return ( {users.map(user => ( ))} ) } export default UserList; App.js import React, {useRef, useState} from 'react'; import Inner from "./Inner"; import UserList from "./UserList"; import CreateUser from "./CreateUser"; function App() { // React Hooks 동적처.. react 기본 - 10.배열 렌더링 배열 렌더링 동적인 배열을 렌더링해야 할때에는 자바스크립트 배열의 내장함수 map()을 사용합니다. map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어주며, 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다. 리액트 에서는 map을 사용하여 렌더링 할 경우 key가 필요하며, 수정되지 않는 기존의 값을 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문에 효과적으로 렌더링을 할 수 있습니다. UserList.js import React from 'react'; // 데이터에 key가 있을 경우 const UserKey = ({user}) => { return ( key가 있을 경우{user.username} "{user.email}" ) } const Us.. react 기본 - 9.useRef useRef DOM을 선택해서 가져오기 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 셀렉터 함수를 사용해서 선택하는데, 리액트 HOOK중에서 useRef로 특정 DOM을 가져올 수 있습니다. Input.js // react useRef 패키지 불러오기 import React, {useState,useRef} from 'react'; function Inputs() { // inputs 값 설정, setInputs 함수명 지정 // 이메일, 닉네임 초기값 지정 const [inputs, setInputs] = useState({ email: '', nickname: '' }); // useRef 변수에 담기 const nameInput = useRef();.. react 기본 - 8.useState(change event) input이 하나일때 상태 관리 Input.js // react useState 패키지 불러오기 import React, {useState} from 'react'; function Input() { // text 값 설정, setText 함수명 지정 const [text, setText] = useState(''); // e를 파라미터로 받아와 입력한 값 받아오기 const onChange = (e) => { setText(e.target.value); } // 값 비우기 const onReset = (e) => { setText(''); } return( 초기화 // text 값 보여주기 값 : {text} ) } export default Input; App.js import React from '.. 이전 1 2 3 다음
