React 메모이제이션과 최적화
·
Frontend/React
React에는 useMemo, useCallback, React.memo, useRef, useTransition 등 다양한 메모이제이션 훅이 존재한다.하지만 이 훅들은 “성능을 무조건 좋게 하는 마법 도구”가 아니라, 비용이 있는 캐싱 메커니즘이다. 즉, 잘못 쓰면 오히려 성능과 가독성, 유지보수성을 모두 해치는 결과를 초래한다. 이 글에서는 React의 주요 메모이제이션 훅들을 비교하고, “언제 써야 하는지, 왜 남용하면 느려지는지”를 정리해본다. 1. 메모이제이션의 본질Memoization = 캐싱(Caching) + 의존성 추적React의 메모이제이션 훅은 이전 렌더 결과(값, 함수, UI)를 저장해두었다가 의존성이 바뀌지 않으면 재계산을 생략한다.즉, 성능 향상의 핵심은 “불필요한 연산을 줄이는..
125. Valid Palindrome
·
Coding Test/LeetCode
난이도: 중간 (Medium)링크: LeetCode 125풀이 날짜: 2025/10/22 1. 문제 이해문자열에서 알파벳과 숫자만 고려하고, 대소문자 구분 없이 회문(Palindrome. 뒤집었을때 원문과 동일한지) 여부를 판단하는 문제. 2. 풀이 방법 비교방법 1 — 전체 전처리 후 뒤집기var isPalindrome = function(s) { const string = s.replace(/[^0-9a-zA-Z]/g, '').toLowerCase(); const reverse = string.split('').reverse().join('') return string === reverse};정규식을 이용해 알파벳/숫자만 남김모두 소문자로 변환 후 뒤집기마지막에 문자열 비교장점: 코드 간결,..
151. Reverse Words in a String
·
카테고리 없음
난이도: 중간 (Medium)링크: LeetCode 151풀이 날짜: 2025/10/22 1. 문제 이해입력 문자열 s는 공백이 포함될 수 있으며, 단어 단위로 뒤집어 출력해야 한다. 연속된 공백은 하나로 간주하며, 결과 문자열은 단어 사이에 한 칸 공백만 존재해야 한다. 2. 접근 방식 — 배열 + 내장 메서드 활용문자열의 앞뒤 공백 제거: trim()공백 기준으로 단어 배열 생성: split(/\s+/) (연속 공백 처리)단어 배열 뒤집기: reverse()배열을 다시 문자열로 변환: join(' ') 3. 풀이 코드1. 배열 + 내장 메서드 활용(배열 + join)var reverseWords = function(s) { return s.trim().split(/\s+/).reverse()...
71. Simplify Path
·
카테고리 없음
난이도: 중간 (Medium)링크: LeetCode 71풀이 날짜: 2025/10/22 1. 문제 이해입력:path = "/a/./b/../../c/"출력:"/c"설명:UNIX 스타일 경로를 단순화하는 문제. → 현재 디렉토리, .. → 상위 디렉토리, 연속 /는 하나로 합침최종적으로 최소한의 경로를 반환 2. 접근 방식 — Stack 활용경로(path)를 / 기준으로 나눈 후(path = "/a/./b/../../c/" -> ['a', '.', 'b','..','..','c']) Stack을 이용해 유효한 디렉토리 또는 파일을 스택에 넣어서 관리하는 방식으로 풀이한다. 규칙:'' 또는 . → 무시.. → Stack에서 상위 디렉토리를 제거(pop)그 외 → Stack에 push. 유효한 디렉토리 또는 ..
150. Evaluate Reverse Polish Notation
·
카테고리 없음
난이도: 중간 (Medium)링크: LeetCode 150풀이 날짜: 2025/10/22 1. 문제 이해이 문제는 후위 표기식(Reverse Polish Notation, RPN) 을 계산하는 문제다. RPN에서는 연산자가 피연산자(숫자) 뒤에 위치한다. 예를 들어["2", "1", "+", "3", "*"] → (2 + 1) * 3["4", "13", "5", "/", "+"] → 4 + (13 / 5)["10","6","9","3","+","-11","*","/","*","17","+","5","+"] → 결과는 22 2. 접근 방식 — Stack 기반 후위 표기식 계산후위 표기식은 괄호 없이도 계산 순서가 명확하다. 이를 스택으로 쉽게 처리할 수 있다. 핵심 아이디어:숫자는 스택에 push한다.연산..
20. Valid Parentheses
·
Coding Test/LeetCode
난이도: 쉬움 (Easy)링크: LeetCode 20 — Valid Parentheses풀이 날짜: 2025/10/22 1. 문제 이해입력:s = "()[]{}"출력:true괄호로 구성된 문자열이 주어질 때, 올바르게 짝이 맞는지 판단하는 문제다. 모든 열린 괄호는 같은 종류의 닫힌 괄호로 닫혀야 하며, 올바른 순서로 닫혀야 한다.입력결과이유"()"true괄호 짝이 맞음"()[]{}"true여러 종류의 괄호가 올바르게 닫힘"(]"false서로 다른 괄호가 짝지어짐"([)]"false괄호 순서가 잘못됨"{[]}"true중첩 구조로도 올바르게 닫힘 2. 접근 방식 — Stack (스택)이 문제는 스택 자료구조의 대표적인 응용 문제다. 핵심 아이디어:열린 괄호는 스택에 push한다.닫힌 괄호가 등장하면, 스택..