React

리액트 프로젝트를 하면서 API_KEY 를 발급받아 사용하는 일이 종종 있는데 이 상태로 git repository 에 바로 올리거나 배포를 할 경우에 악용될 우려가 있기 때문이다. 따라서 API_KEY 를 숨길 필요가 있는데 환경 변수를 이용한 방법이 있다. 환

이번에 개인 프로젝트를 하면서 모달창을 구현하는 일이 생겼다.react-modal 과 같은 라이브러리도 있지만 이번에는 라이브러리를 사용하지 않고 모달창을 구현하고 싶었다.1\. 모달창 디자인기본 상태(false)에서 메뉴 아이콘을 누르면 SideBar.js 의 &lt

Styled-Components에서 margin: 0, padding: 0, font-family 같이 Global한 속성들을 적용시킬 수 있게 해주는 방법이 있다.우선 createGlobalStyle 을 import 해준다.그 다음 GlobalStyle 을 생성해준다

React Hooks가 나오기전에는 컴포넌트의 상태 관리를 하기 위해서는 클래스 기반으로 컴포넌트를 작성해야 했다. 아래의 코드는 간단한 name, surname 입력을 할 수 있는 컴포넌트이다.클래스 컴포넌트의 this.state 에 name, surname 을 저장

useEffect Hook 을 사용하면 함수형 컴포넌트에서도 side effect 를 수행할 수 있다.side effect 란?React 컴포넌트가 렌더링 된 후 비동기적으로 처리해야 하는 작업들을 말한다.예를 들어서 API를 호출하는 경우 데이터를 비동기적으로 가져와

공식 문서의 custom hook 설명 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.이전 게시글 (useEffect)에서 작성한 코드를 보자.여기서 resize하는 로직, document.title, 그리고 이름을 입력하는 부분 을

리액트는 컴포넌트를 렌더링 한 뒤 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면 DOM을 업데이트한다.React.memo() 로 컴포넌트를 감싸면 리액트는 컴포넌트를 렌더링하고 그 결과를 메모이제이션한다. 다음 렌더링 시

useMemo 는 useCallback과 유사한 방식으로 최적화에 사용된다.useCallback 은 메모이제이션 된 함수를 반환하는 반면에 useMemo 는 메모이제이션 된 값을 반환한다.다음의 예제를 보자.Counter One 버튼을 누르면 counterOne 변수가

Ducks pattern 을 적용하기 전에 redux의 폴더 구조를 action, reducer, actionTypes(Action type은 Action과 Reducer에서 둘 다 쓰이기 때문에 따로 분리해서 관리하기도 함) 폴더로 나누어서 관리를 했다.이런식으로 C

useRef는 함수형 컴포넌트에서 DOM node에 직접적인 접근을 가능하게 해주는 Hook이다.클래스형 컴포넌트에서는 createRef를 사용한다.예를 들어서, 페이지가 처음 로드됐을 때 input에 포커스를 줄 수 있다. 아래 코드는 input 태그만 화면에 띄우는

아주 빠르다고 소문난 번들러를 적용해보고자 한다.비약적인 빌드 시간 향상CRA 빌드 시간 (약 4997ms 소요)Vite 빌드 시간 (약 1320ms 소요)Vite 사용시 빌드 시간이 약 70%나 감소했다.vite-plugin-svgr : SVG 그래픽을 리액트 컴포넌