도리쓰에러쓰

1. useCallback()과 useMemo()란? useCallback()과 useMemo()는 메모이제이션(Memoization) 된 값을 반환한다. 차이점이 있다면 useCallback()은 메모이제이션된 함수를 반환하고 useMemo()는 어떠한 타입에 상관 없이 메모이제이션된 값을 반환한다. 💡 메모이제이션(Memoization) : 연산의 결과값을 메모리에 저장해두고 이전 값과 결과가 동일할 때 재사용하는 기법 📌 useCallback()과 useMemo()를 알기 전 알고 있어야 할 React가 리렌더링을 하는 조건들이 있다. 1️⃣ 자신의 state가 변경될 때 2️⃣ 부모 Component로부터 전달받은 props가 변경될 때 3️⃣ 부모 Component가 리렌더링될 때 (자식 Com..

🔽 우선 forwardRef()을 알기 전에 ref를 알아야 하는데 아래 게시물을 참고하면 좋을 것 같다. [React] Ref 사용하여 DOM 요소에 접근하기 - useRef() 1. Ref란? React에서 DOM에 직접 접근하기 위해 사용한다. HTML로 예를 들자면, 에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다. HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, Rea dori-coding.tistory.com 1. forwardRef()란? React에서 일반적으로 사용할 수 없는 prop이 몇 가지 있다. 그 중 ref prop도 HTML Element 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다. React Co..

1. useContext()란? 보통 부모 Component에서 자식 Component로 props를 통해 데이터를 전달하는데, 그 깊이가 깊어진다면 거쳐가야 하는 Component도 많아진다. 그렇게 된다면 코드를 반복적으로 작성해야 하는 일도 많아지고, 변수명이 바뀌면 거쳐가는 모든 Component에서 변수명을 수정해야 하는 등 비효율적인 문제가 발생한다. 이런 비효율적인 문제를 해결하는데에 Context가 꽤나 유용하다. Context를 사용하면 전역적으로 데이터를 공유하기 때문에 데이터가 필요한 Component에서 바로 사용이 가능하게 된다. React Hook인 useContext()는 Context를 좀 더 편하게 사용할 수 있게하는데, 우선 Context API의 개념에 대해 알아보도록 ..

1. Ref란? React에서 DOM에 직접 접근하기 위해 사용한다. HTML로 예를 들자면, 에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다. HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, React에서도 DOM 요소에 직접 접근하기 위해 사용하는 것이 Ref이다. 2. Ref 사용하기 아래 예제는 "활성화" 버튼을 클릭하면 비활성화(disabled) 되어 있던 input이 활성화되고, "초기화"버튼을 클릭하면 원래의 상태로 input을 비활성화 되는 Element를 제어하는 코드이다. import { useRef } from "react"; const Field = () => { const inputRef = useRef(null); const focus..

📌 문제 사이트 코딩테스트 연습 - [3차] 파일명 정렬 파일명 정렬 세 차례의 코딩 테스트와 두 차례의 면접이라는 기나긴 블라인드 공채를 무사히 통과해 카카오에 입사한 무지는 파일 저장소 서버 관리를 맡게 되었다. 저장소 서버에는 프로그램 programmers.co.kr 📌 문제 설명 세 차례의 코딩 테스트와 두 차례의 면접이라는 기나긴 블라인드 공채를 무사히 통과해 카카오에 입사한 무지는 파일 저장소 서버 관리를 맡게 되었다. 저장소 서버에는 프로그램의 과거 버전을 모두 담고 있어, 이름 순으로 정렬된 파일 목록은 보기가 불편했다. 파일을 이름 순으로 정렬하면 나중에 만들어진 ver-10.zip이 ver-9.zip보다 먼저 표시되기 때문이다. 버전 번호 외에도 숫자가 포함된 파일 목록은 여러 면에서 ..

📌 문제 사이트 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 📌 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합..

React에서는 Form을 다루는 2가지 방법이 있는데, 바로 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)이다. 과연 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 무엇인지 지금부터 알아보도록 하자. 1. 제어 컴포넌트(Controlled Component) 💡 React 공식 문서에서 제어 컴포넌트(Controlled Component)에 대한 설명은 다음과 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의..

프로그래머스 코딩테스트 Level2 풀이 모음입니다. Ctrl + F 를 이용해 문제 풀이를 찾아주세요. 🔽 알고리즘 문제 (프로그래머스 사이트) 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 💡 최댓값과 최솟값 function solution(s) { const nums = s.split(' ').map(v => parseInt(v)); return `${Math.min.apply(null, nums)} ${Math.max.apply(null, nums)}`; } 💡 JadenCase 문자열 만들기 function solution(s) { return s.split(' ').map(v => v.charAt(0).toUpperCase() + v.slice..