yevdev◡̈

커스텀 Hook은 언제 필요? 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생 input을 관리하는 코드는 관리 할 떄마다 꽤나 비슷한 코드가 반복 이번 포스팅 내용은, 위의 상황에 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보는 것이다. 커스텀 Hooks 만드는 방법 src 디렉터리에 hooks라는 디렉터리를 만들고, 그안에 useInputs.js 파일을 만든다 커스텀 Hook을 만들대는 보통 이렇게 use 라는 키워드로 시작하는 파일을 만들고 그안에 함수를 작성한다. 파일안에 useState, useEffect, useReducer, useCallback등 Hooks를 사용하여 원하는 기능을 구현해주고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다. useInputs..

Study #19 까지의 상태관리는 어떻게 해왔을까? 주요 상태 업데이트 로직을 App 컴포넌트 내부에서 이루어왔다 상태를 업데이트 할 때, useState를 사용해서 새로운 상태를 설정했다. 💡useReduder? useState를 사용하여 상태를 관리하는 것이 아닌 또다른 상태관리 방법 이 Hook 함수를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있다. 심지어 다른 파일에 상테 업데이트 로직을 작성한 후, 사용할 수 있다. 💡reducer? 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reduer(state, action) { // 새로운 상태를 만드는 로직 // const ..

💡React.memo? 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능을 최적화 시켜주는 함수! 이 함수를 사용하면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄 수 있다. 사용법은 그냥 감싸주면 됨! CreateUser.js 에 적용 // 컴포넌트 리렌더링 방지를 위한 React.memo export default React.memo(CreateUser); 왕 쉬움! UserList.js 에 적용 import React, {useEffect} from 'react' // user리스트들이 보여지는 부분 const User = React.memo(function User({user, onRemove, onToggle}) { return( onT..

💡useCallback useCallback은 useMemo와 비슷한 Hook useMemo는 특정 결과값을 재사용 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 이전에 App.js 에서 구현했던 onCreate, onRemove, onToggle 함수를 확인해보자 const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출..

💡 useMemo? 성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용한다. 첫번째 파라미터 : 어떻게 연산할지 정의하는 함수 두번째 파라미터 : deps 배열 , 이 배열 안에 넣은 내용이 바뀌면, 우리가 등록한 함수를 호출해서 값을 연산해주고, 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 된다. countActiveUsers라는 함수를 만들고 active값이 true인 사용자의 수를 세어서 화면에 렌더링 해보자! App.js import React,{useRef, useState} from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; // 활성 사용자 ..

이번 포스팅은 useEffect라는 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때(사라질때), 그리고 업데이트 될때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대한 것이다! 1️⃣ 마운트 / 언마운트 import React, {useEffect} from 'react' // useEffect 불러오기 function User({user, onRemove, onToggle}) { // useEffect 사용! useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return() => { console.log('컴포넌트가 화면에서 사라짐'); } },[]); return( onToggle(user.id)} >{user...

#12 배열에 항목 추가 , #13 배열의 항목 삭제에 이어서 하는 배열 항목 수정하기이다! User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌는 기능을 구현해보자! 1️⃣ App 컴포넌트의 users 배열 안의 객체 안에 active라는 속성 추가 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, email}..

저번 포스팅에서 배열에 항목 추가하기에 이어, 항목을 제거하는 기능을 구현해보겠다! 1️⃣ 삭제 버튼 렌더링 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 () => onRemove(user.id) : User컴포넌트의 삭제 버튼이 클릭 될 때, user.id값을 앞으로 props로 받아올 onRemove 함수의 파라미터로 넣어서 호출..

제목과 같다시피 배열에 새로운 항목을 추가하는 방법을 알아보겠다! 일단, 배열에 항목을 추가할 준비를 시작해보자 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..

💡이전의 ref? 특정 DOM을 선택해야할 때 사용 함수형 컴포넌트에서 이를 설정 할 때 useRef를 사용하여 설정함 💡ref의 또다른 용도 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음 useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않음. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 가능 어떤 값을 관리할 수 있을까? setTimeout, setInterval을 통해 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 💡해볼것? 배열에 새 항목을 추가할때, 새항목에서 사용할 고유 id를 관리하..