yevdev◡̈

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

이번엔 input이 여러개일 경우 어떻게 관리해야하는지 알아보자! 구현해볼 것은 이름과 닉네임을 입력하면 값 옆의 부분에 같이 입력이 되고, 초기화를 시키면 이름과 닉네임이 모두 초기화! 💡Idea input의 개수가 여러개가 됐을 때는, 단순히 useState를 여러번 사용하고 onChange도 여러개 만들어서 구현할 수 있다. 하지만, 좋지 않은 방법! input에 name을 설정하고 이벤트가 발생했을 때, 이 값을 참조 + useState에서는 문자열이 아니라 객체 형태의 상태를 관리해주기 더 좋은 방법! import React, {useState} from 'react' function InputSample() { const [inputs, setInputs] = useState({ // 문자열이..

input 태그의 상태를 관리해보자! 구현할 것은 아래의 사진처럼 input에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 값이 비워지도록 하는것. ➰사용할 것 useState : text 를 하단에 나타나게하고, 초기화를 하기 위해서 onChange 이벤트 : 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있음! e.target : 이벤트가 발생한 DOM인 input DOM을 가리킴 e.target.value : 현재 input에 입력한 값이 무엇인지 알 수 있음. import React, {useState} from 'react' function InputSample() { // text : 현재 상태, setText : text를 바꿔주는 Se..

리액트를 공부하는 초반에 조금 헷갈려했던 useEffect, useState 중 useState를 공부해보고자 한다. 사용자의 인터렉션에 따라 바뀌어야 할 때 어떻게 구현해야 하는지에 대해서..! 💡useState? react Hooks 중 하나! 함수형 컴포넌트에서도 상태를 관리할 수 있게 해주는 Hook 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 따라서 useState를 사용하면 컴포넌트에서 상태를 관리할 수 있다. 1️⃣ 이벤트 설정하기 import React from 'react' function Count() { const onIncrease = () => { // button이 눌렸을 때 동작할 코드 } const onDecrease = () => { // button이 눌렸을 때..

💡조건부 렌더링? 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미 Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, isSpecial 이라는 props를 설정 import React from 'react'; import Hello from './Hello'; import Wrapper from "./Wrapper"; function App() { return ( ); } export default App; true는 자바스크립트 값이기 때문에 중괄호로 감싸기 EX) Hello 컴포넌트에서는 isSpecial이 true냐 false 이냐에 따라서 컴포넌트 좌측에 * 표시를 보여주겠다 삼항연산자로~ Hello.js import React from 'react'; function Hello(..