yevdev◡̈

💡 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..

💡최근접 점의 쌍 (Closest Pair) 문제? 2차원 평면상의 n개의 점이 입력으로 주어질 때, 거리가 가장 가까운 한 쌍의 점을 찾는 문제 💡간단한 해결 방법 : O(n^2) 알고리즘 모든 점에 대해 각각의 두점 사이의 거리를 계산하여 가장 가까운 점의 쌍 찾기 비교헤야 할 쌍은 몇개? nC2 = n(n-1)/2 = O(n^2) 한쌍의 거리 계산은 O(1) 따라서 시간 복잡도는 O(n^2) 💡보다 효율적인 해결방법 : 분할 정복 이용 n개의 점을 1/2로 분할하여 각각의 부분 문제에서 최근접 점의 쌍 찾기 2개의 부분해 중에서 짧은 거리 (d)를 가진 점의 쌍을 일단 찾기 (재귀적으로) 결합 : 두개의 부분해를 취합할 때는 반드시 두 부분 문제서 각각 한 점 씩 포함되는 점의 쌍 중에서 그 거리가..

이미 분할정복 알고리즘을 활용한 대표적인 문제를 몇개 블로그에 작성해놓았다. 여기에는 분할정복의 의미와 사용시에 주의할 점을 작성하고자 한다! 💡분할 정복 (Divide-and-Conquer) 알고리즘 ? 주어진 문제의 입력을 분할하여 문제를 해결 (정복) 하는 방식의 알고리즘 하향식 접근방법 (Top-down) 분할한 입력에 대하여 동일한 알고리즘을 적용하여 해를 계산하며, 이들의 해를 취합하여 원래의 문제의 해를 얻음. Divide : 나누기 Conquer : 각 부분해를 해결 Combine : (필요하다면) 부문제의 해를 결합 🚫분할 정복을 적용하는데 있어서 주의할 점 분할 정복이 부적절한 경우 : 입력이 분할될 때마다 분할된 부분문제의 입력 크기의 합이 분할되기 전의 입력 크기보다 매우 커지는 경..

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

💡IDEA 그냥 코드를 작성 (따로 정리하지 않겠음, 재사용할 수 없어서 ㅜ ) 한파일에 여러개의 컴포넌트 선언 1️⃣ 배열이 고정적일 경우, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법 (정적인 배열) import React from 'react' function User({user}) { return( {user.name} {user.age} ) } function UserList() { // 렌더링을 위한 배열 const users = [ {id: 1, name: 'John', age:19}, {id: 2, name: 'Car', age:20}, {id: 3, name: 'lee', age:14}, ]; return ( ) } export default UserList 2️⃣ 동적인 배열을..

리액트를 사용할 때, 가끔식 DOM을 직접 선택해야하는 상황이 발생할 수 있다. ex) 특정 엘리먼트의 크기를 가져와야 할 경우 ex) 스크롤바 위치를 가져오거나 설정해야할 경우 ex) 포커스를 설정해야할 경우 이럴 경우, 리액트에서 ref라는 것을 사용한다! 💡useRef? 함수형 컴포넌트에서 ref를 사용할 때 사용하는 Hook 함수 이번에 구현할 것? 전에 만들었던 inputSample에 초기화 버튼을 누르면 이름 input에 포커스가 잡히도록 하는 기능! import React, {useState, useRef} from 'react' // useRef 선언 function InputSample() { const [inputs, setInputs] = useState({ name: '', nick..