yevdev◡̈

이미 분할정복 알고리즘을 활용한 대표적인 문제를 몇개 블로그에 작성해놓았다. 여기에는 분할정복의 의미와 사용시에 주의할 점을 작성하고자 한다! 💡분할 정복 (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(..

💡Props? Properties의 줄임말 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할때, props를 사용 Props의 기본 사용법 1️⃣ 하나의 props 전달 Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name 이라는 값을 전달해주고 싶을 경우 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( // name값을 Hello 컴포넌트에게 보내기 ); } export default App; Hello.js (받아온 컴포넌트 사용하기) import React from 'react'; function Hello(props) { return {props.name} } export d..

💡JSX? 리액트에서 생김새를 정의할 때, 사용하는 문법 HTML처럼 생겼지만 실제로는 JavaScript! return JSX를 알아보자!; 💡 JSX의 기본규칙 1️⃣ 꼭 닫혀야 하는 태그 import React from 'react'; import Hello from './Hello'; function App() { return ( /* 여기에서 오류 발생! 꼭 로 닫아주자 */ ); } export default App; HTML에서는 input과 br 태그를 닫지 않고 사용하기도 한다! 하지만 리액트에서는 그렇게 하면 안됨! Self Closing 태그를 사용하자! /* 잘못됨 */ /* Self Closing 태그 */ 2️⃣ 꼭 감싸져야하는 태그 두개 이상의 태그는 무조건 하나로 감싸져야 한..