일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- TypeScript
- 블록체인
- CSS
- 가상화
- AWS
- HTML
- 리액트
- 파이썬
- 백엔드
- 솔리디티
- node.js
- 타입스크립트
- 웹
- 쿠버네티스
- 컴퓨터공학
- 프론트엔드
- 이슈
- 자바스크립트
- 클라우드
- k8s
- 백준
- docker
- kubernetes
- JavaScript
- 이더리움
- BFS
- react
- next.js
- es6
- 알고리즘
- Today
- Total
목록🎨 프론트엔드/React.js (24)
즐겁게, 코드
제작중인 앱에서 사용할 컬러 팔레트 패키지를 살펴보던 중, 의아한 점이 하나 생겼습니다. Controlled 컴포넌트에서 selectedColor 라는 변수를 갖는 것만 제외하면 둘은 거의 동일해 보이는데, 왜 Controlled - Uncontrolled 라는 이름으로 컴포넌트를 분리한 걸까요? 실제 사용할 때는 Uncontrolled 컴포넌트를 사용해도 아무 문제가 없었지만, 애매한건 확실히 짚고 넘어가야겠다는 생각에 시간을 내어 둘의 차이를 찾아보게 되었습니다. Controlled Component (제어 컴포넌트) 제어 컴포넌트는 컴포넌트의 상태나 속성(props)으로 주어진 값을 활용하는 컴포넌트입니다. 태그를 제어 컴포넌트로 사용하는 예를 들어보면, value 값을 useState로 관리하는 ..
크롬이나 웨일 등의 최신 브라우저는 다양한 익스텐션을 지원하는데요, 오늘은 리액트로 익스텐션 앱을 빌드하는 방법을 소개하려 합니다. 프로젝트 세팅 먼저 create-react-app 으로 리액트 앱을 빌드한 다음, public 폴더의 manifest.json 파일을 확인합니다. 그럼 아래와 같이 매니패스트 파일이 생성되었음을 알 수 있습니다. { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png",..
최근 깃허브 스타 1k를 돌파한 hook-flow 라는 프로젝트가 있습니다. 리액트 훅의 모호한 실행 순서가 보기좋게 정리되어 있어 저도 이미지를 저장해서 보고 있습니다. 😁 그런데 이상하게도, LayoutEffects라는 낯선 이름이 하나 보이네요. 오늘은 useLayoutEffect 라는 생소한 훅을 소개해 보겠습니다. useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) useLayoutEffect를 인텔리센스가 자동으로 완성한 모습입니다. 그런데 어디서 많이 본 형태 아닌가요? useEffect(() => { effect return () => { cleanup } }, [input]) 맞습니다! u..
리액트를 다룰 때 함수 컴포넌트에서 속성(prop)을 받아오는 방법은 아마 익숙할 것입니다. const App = ({ name, age }) => { return ( 이름 : {name} 나이 : {age} ) } * 편의상 export default 구문은 따로 표기하지 않았습니다. App 컴포넌트에서 name과 age 라는 속성을 구조 분해 할당 문법으로 받아오는 모습인데요, 만약 상위 컴포넌트로부터 name과 age 속성을 전달받지 못하면 해당 값은 undefined 가 됩니다. 이런 경우를 방지하기 위해 리액트에서는 defaultProps 라는 특수한 프로퍼티를 사용해 속성의 기본값을 정해줄 수 있습니다. const App = ({ name, age }) => { return ( 이름 : {na..
리액트에서는 일반적으로 상태를 위에서 아래로밖에 전달할 수 없지만, 컨텍스트(context)를 활용하면 전역으로 상태값을 활용할 수 있게 된다. (리액트의 컨텍스트는 자바스크립트와는 달리 '데이터 저장소' 라고 생각하면 된다.) [context의 기본 사용법] import React, { Component } from 'react' // 컨텍스트(데이터 저장소) 생성 const MyContext = React.createContext(defaultValue); // Provider 생성 ... ----------------------------------------------------------- // 에서 {value => /* context 값을 이용한 렌더링 */} 1. 컨텍스트를 활용하기 위해서..
useRef 훅은 마치 북극성에 비유할 수 있는 훅이다. 훅을 소개하기 앞서 코드를 하나 살펴보자. import React, { useState } from "react"; function UseRef() { const [name, setName] = useState(""); return ( setName(e.target.value)}> 이름 : {name} ); } export default UseRef; 이름을 입력받는 입력란과 이름을 출력하는 요소가 있다. 만약 상태가 업데이트될 때마다 컴포넌트가 렌더링되는 횟수를 구해야 한다면, 어떻게 구할 수 있을지 잠깐 생각해보자. 아마 useRef를 모르는 사람이라면 이렇게 코드를 작성할 것이다. (실제로 나도 이렇게 작성했었다.) import React, ..
useMemo 훅은 useState와 useEffect에 비해서는 존재감이 다소 떨어지지만 강력한 기능을 탑재하고 있습니다. 바로 메모이제이션을 구현해 함수의 중복 동작을 막아 성능을 향상시킬 수 있는데, 한번 사용 방법을 살펴보도록 하겠습니다. [useMemo 훅의 기본 형태] import React, {useMemo} from 'react' const memoizedValue = useMemo(() => { return (수행할 동작 (주로 시간이 오래 걸리는)); }, [의존값]); 리액트 컴포넌트는 재렌더링될때마다 컴포넌트 내의 모든 함수를 다시 호출하지만, useMemo를 사용하면 의존값으로 주어진 값이 변경될 때만 특정 함수를 호출할 수 있습니다. import React, { useState,..