본문 바로가기

반응형

전체 글

(174)
[ React ] useReducer를 알아보자 이 글은 리액트 공식 문서와 이 영상을 참고해서 정리한 글이다. 영상이 아주 잘 정리되어 있어서 보는 것을 강력히 추천한다. (영상제작자에게 허락 받았습니다) useReducer의 세 요소 useReducer의 구문을 먼저 살펴보자. const [state, dispatch] = useReducer(reducer, initialState); useReducer는 useState와 같이 상태 관리를 할때 사용하는 훅이다. useState와 육안으로 구분되는 점은 dispatch와 reducer다. 이 둘은 함수인데, 각각 형태는 아래와 같다. dispatch(action) reducer(state, action) 여기서 주목해야할 점은 dispatch 내부의 action이 reducer의 두 번째 인자로 ..
[ React ] useRef를 알아보자 이 글은 리액트 공식 문서와 이 영상을 참고해서 정리한 글이다. 영상이 아주 잘 정리되어 있어서 보는 것을 강력히 추천한다. (영상제작자에게 허락 받았습니다) 정의 및 특징 우선 공식 문서에서 useRef를 어떻게 정의하고 있는지부터 알아보자. useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. 여기서 중요한 것은 세 가지다. 1. useRef는 변경 가능한 객체를 반환한다. 2. 반환 객체는 useRef의 인자를 'curre..
[ React ] React Router 사용법 (v6) 이번 글에서는 React Router의 개념 및 사용법에 대해 알아보자. React Router의 기본 구조 React Router는 크게 아래 세 파트로 나뉜다. BrowserRouter: History 객체를 생성하고, 초기 위치를 상태로 만들고, URL을 참조한다. Routes: Route Config라는 경로 객체 트리를 생성한다. Route는 Routes 안에서만 유효하다. Route: path가 현재 URL과 일치하면 element가 렌더링된다. 여기서 생소한 단어 두 개가 등장한다. 먼저, History 객체란? History 객체는 History Stack을 조작할 수 있도록 API를 제공하는 객체다. History Stack은 접속 이력 스택으로 생각하면 된다. 브라우저의 뒤로 가기 및 ..
자바스크립트 코테 꿀팁 하나씩 모아가는 꿀팁 리스트... 1. 문자열 슬라이싱 - slice는 음수를 허용하기 때문에 substr보다 좋다. // 구문 str.slice(beginIndex[, endIndex]) // 파이썬과 비교 str.slice(n) = str[n:] str.slice(n, m) = str[n:m] str.slice(-n) = str[-n:] str.slice(-n, -m) = str[-n:-m] 인덱스 초과시 빈 문자열 반환 2. min, max // 배열 최대값 Math.max(...[1,2,3,4,5]) // 최소값 Math.min(4, 5) 3. 객체 순회 const obj = { 'a': 1, 'b': 2, 'c': 3 } // 1. 객체를 배열로 변환 Object.entries(obj) //[ ..
[ HTML+CSS ] box-shadow, text-shadow 1. box-shadow /* 구문 */ box-shadow: inset offset-x offest-y blur color offset-x: 수평 그림자의 offset값 offset-y: 수직 그림자의 offset 값 blur: 그림자 가장자리를 부드럽게 처리하는 정도 (default 0) color: 그림자 색 (default box color) inset: 안쪽 그림자 (optional) 💡 Tip1 그림자 색깔이 연할수록 자연스럽다! vscode에서 색에 마우스 커서를 올리면 아래 그림처럼 뜨는데 표시한 막대를 아래쪽으로 당기면서 원하는 색을 정해보자. 💡 Tip2 그림자는 겹치게 생성할 수 있다. 콤마로 이어주면 된다. See the Pen Untitled by 이찬 (@vexkruqa-the-..
[ HTML+CSS ] CSS 선택자, 가상클래스 정리 기본 선택자 1. 전체 선택자 * /* 전체 요소 선택 */ * { color: green; } 2. 태그 선택자 /* 모든 a 태그 */ a { color: red; } 3. 클래스 선택자 . /* class="spacious" 인 모든 요소 */ .spacious { margin: 2em; } /* 태그중 class="spacious" 인 모든 요소 */ li.spacious { margin: 2em; } /* 태그중 "spacious" 와 "elegant" 를 포함하는 요소 */ /* ex) class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } 4. ID 선택자 # /* id="demo" 요소 선택 */ #demo { bord..
[ React ] useEffect와 컴포넌트 생명주기 리액트에서 Hook이 등장한 이후로 함수 컴포넌트 내부에서 state와 컴포넌트의 생명주기를 다룰 수 있게 되었다. state는 'useState'라는 훅을, 컴포넌트는 생명주기는 'useEffect'라는 훅을 사용하면 된다. 이 글의 학습 목표는 'useEffect'의 작동 원리 및 순서를 상세하게 이해하는 것이다. 그럼 바로 시작해보자! 1. Hook Flow Diagram 사실 이 글은 위 다이어그램을 눈으로 직접 확인해보는 것에 불과하다. 위 그림과 같이 컴포넌트의 생명주기는 크게 세 단계로 나뉜다. 참고로 'Run lazy initializers'는 useState와 useReducer 호출 시점으로, 이 함수들은 Mount 시점에만 호출된다. Mount, Update, Unmount의 의미는 ..
[ React ] Hook - 공식문서 뜯어보기 Hook이란? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 '연동(hook into)'할 수 있게 해주는 함수입니다. 공식문서에서 Hook을 위와 같이 기술하고 있다. Hook이 없던 시절에는 함수 컴포넌트로 state나 생명주기 기능을 조작할 수 있는 방법이 없었기 때문에 클래스를 강제적으로 사용해야만 했다. 그런데 Hook이 등장함으로써 함수 컴포넌트 내부에서 state와 생명주기 기능을 조작할 수 있게 되었다. 즉, React는 Hook의 등장 이후로 더이상 class에 의존하지 않게 되었다고 할 수 있다. Hook은 크게 빌트인 훅과 커스텀 훅으로 나뉜다. 빌트인 훅은 React에서 제공하는 훅이고, 커스텀 훅은 개발자가 새롭게 생성하는 ..

반응형