본문 바로가기

👨‍💻 전체 글33

[React] key가 필요한 이유와 주의할 점 들어가며 React에서 map으로 컴포넌트를 반복 렌더 할 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있는데, 여기서 key는 무엇이며 왜 필요한지에 대해 알아본다. " Warning: Each child in a list should have a unique "key" prop " 자식에 대한 재귀적 처리 DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. 💡 exam Duke Villanova // 변경 Connecticut // 자식요소 추가 Duke Villanova 위와 같은 경우 React는 Duk.. 2022. 12. 10.
[React] State 살펴보기 state와 필요한 이유 함수 컴포넌트에서 내부적으로 상태를 관리해야 하는 일이 필요하다. 이를 위해 필요한 것이 state다 state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체라고 할 수 있다 const, let 등으로 선언한 변수와 다르게 state는 값이 변하면 관련 있는 컴포넌트들이 re-rendering 되어 화면이 바뀐다 useState() import React, { useState } from "react"; // Hook const [state, setState] = useState(); // [값, 값을 변경할 때 쓰는 함수] 일반적으로 리액트에서는 '유동적인 데이터'는 변수에 담아서 사용하지 않고, useState라는 리액트 Hook함수를 사용하여 stat.. 2022. 12. 4.
[JavaScript] 옵셔널 체이닝 '?.'으로 객체 다루기 ✔ 들어가며 프로퍼티가 없는 중첩 객체에 접근할 때, 에러 없이 안전하게 접근할 수 있는 방법이 필요한 경우가 있다. 프로퍼티의 여부를 확인하고 접근하는 방법도 있지만, 옵셔널 체이닝을 활용하면 표현식이 더 짧고 간단해진다. ✔ 옵셔널 체이닝이 필요한 상황들 💡 오브젝트 프로퍼티 접근 user.address.street로 접근할 때, 사용자들 중 몇몇은 주소 정보를 가지고 있지 않다면 에러가 발생한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 💡 DOM 요소 접근 페이지에 존재하지 않는 요소에 접근하여 요소의 정보를 가져오려 하면 문제가 .. 2022. 12. 4.
[leetcode/JS] 40_Combination Sum II 풀이 🎲 문제 40. Combination Sum II Medium 후보 번호(candidates) 모음과 타겟 번호(target)가 주어지면 후보 번호 요소의 합계가 target인 모든 고유한 조합을 찾습니다. 후보자의 각 번호는 조합에서 한 번만 사용할 수 있습니다. 참고: 솔루션 세트는 중복 조합을 포함하지 않아야 합니다. 더보기 Given a collection of candidate numbers (candidates) and a target number (target), find all unique combinations in candidates where the candidate numbers sum to target. Each number in candidates may only be used .. 2022. 12. 1.
[leetcode/JS] 326_Power of Three 풀이 🎲 문제 326. Power of Three Easy 정수 n이 주어지면 3의 거듭제곱이면 true를 반환한다. 그렇지 않으면 false를 반환한다. n == 3 x제곱인 정수 x가 존재할 경우, 정수 n은 3의 거듭제곱이다. 더보기 Given an integer n, return true if it is a power of three. Otherwise, return false. An integer n is a power of three, if there exists an integer x such that n == 3x. Example 1: Input: n = 27 Output: true Explanation: 27 = 33 Example 2: Input: n = 0 Output: false Expl.. 2022. 12. 1.