Starters Starters

언제 사용? - react 컴포넌트가 처음 화면에 나타날 때 - 사라질 때 - 컴포넌트의 상태가 업데이트될 때 - 리렌더링 될 때마다 어떤 작업 반복할 때 ※ 마운트 / 언마운트 - 마운트는 컴포넌트가 나타나는 것 - 언마운트는 사라지는 것(삭제 같은 것 수행할 때) - UserList.js - 1. 상단에 useEffect 선언 import React, { useEffect } from 'react'; 2. useEffect 사용 - 마운트될 때 function User({ user, onRemove, onToggle }){ const {username, email, id, active} = user; useEffect(() => { console.log('컴포넌트가 화면에 나타남'); }, []); ..

- 각 계정명 클릭하면 초록색으로 바뀌고, 다시 누르면 다시 검정색으로 변하도록 - App.js - 1. 배열 내의 객체에 각각 변수(active) 추가 const [users, setUsers] = useState([ { id: 1, username: 'starters', email: 'public.starters@gmail.com', active: true, }, { id: 2, username: 'tester', email: 'tester@gmail.com', active: false, }, { id: 3, username: 'jajajojo', email: 'jajajojo@gmail.com', active: false, } ]); - UserList.js - 2. active 변수 추가하고, s..

- UserList.js - 1. userList함수에서 onRemove라는 props 받아온다. function UserList( { users, onRemove }){ 2. onRemove={onRemove} 추가 return ( { users.map( (user, index) => ( ) ) } ) 3. User 함수에서도 onRemove props로 받아와준다. function User({ user, onRemove }){ 4. User 함수에 추가 return ( {user.username}({user.email}) 삭제 ); 5. button에 onClick속성을 통해 새로운 함수 만들어준다. - 파라미터를 넣어주기 위해 onRemove(user.id)}>삭제 6. 만약 계속 user.~~ 이..

1. CreateUser.js 생성 import React from 'react'; function CreateUser( { username, email, onChange, onCreate } ){ return ( 등록 ); } export default CreateUser; - App.js - 코드 추가 import React, { useRef, useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const {username, em..

useState 를 사용하면 값을 변경하고 관리할 수 있다. 하지만 값을 바꿀 때, 컴포넌트가 리렌더링 된다. 하지만 특정 상황에서는 리렌더링 할 필요가 없는 상황이 있음 => useRef 사용 - 값이 바뀔 때 리렌더링 될 필요 없을 때 주로 아래와 같은 때에 쓰임 코드 기존 UserList()의 users 배열을 잘라내고 props로 받아온다. import React from 'react'; function User({ user }){ return ( {user.username}({user.email}) ); } function UserList( { users }){ return ( { users.map( (user, index) => () ) } ) } export default UserList; ..

이렇게 나오게 할 때 비효율적인 방법 import React from 'react'; function UserList(){ const users = [ { id: 1, username: 'starters', email: 'public.starters@gmail.com' }, { id: 2, username: 'tester', email: 'tester@gmail.com' }, { id: 3, username: 'jajajojo', email: 'jajajojo@gmail.com' } ]; return ( {users[0].username}({users[0].email}) {users[1].username}({users[1].email}) {users[2].username}({users[2].email})..

DOM을 가져올 때 React에서 사용하는 법 (getElementById / querySelector 같이) 함수형 컴포넌트에서 하는 방식 이전에 만든 컴포넌트에서 초기화 버튼을 누른 뒤에 초기화를 하고 나서 포커스가 초기화 버튼으로 가 있다. -> React에서는 실행 뒤 포커스를 이름부분의 input쪽에 옮기거나 하는 기능이 없다. => DOM에 직접 접근해야함 DOM에 직접 접근하기 1. useRef 불러오기 import React, { useState, useRef } from 'react'; 2. useRef() 선언 - 이전 코드에 nameInput 변수 추가 function InputSample(){ const [inputs, setInputs] = useState({ name: '', n..

- App.js - import React from 'react'; import InputSample from './InputSample'; function App() { return ( ); } export default App; 이벤트 함수 생성 - InputSample.js - function InputSample(){ const onChange() = (e) => { console.log(e.target); } return ( .... e 는 아래 코드에서 어떤 이벤트가 생성될 때, 이벤트에 대한 내용이 담기는 객체이다. e.target은 이벤트가 발생한 DOM에 대한 내용을 담고 있다. e.target.value 현재 발생하는 이벤트의 구체적인 값을 담고 있음 import React, { use..