React

js(ts)로 개발을 해보았다면 event 핸들링에 익숙 할 것이다.작은 프로젝트에서 몇개안되는 이벤트 컨트롤을 할 땐 상관없지만프로젝트가 커지고 좀 더 복잡한 이벤트를 컨트롤 하고 상태를 업데이트 할 때그만큼 접근하는 dom도 복잡해지고 상태관리도 복잡해지는 법이다.

Window는 Node.js 공식 다운로드를 통해 LTS버전을 다운하면된다.LTS는 Long Term Support의 약자로 장기 지원 버전을 뜻한다."믿고 쓸만하다~"라는 느낌으로 알고 있으면 편하다.mac/linux는, nvm이라는 도구를 통해 Node.js를 설치

이전 포스팅에서 만든 프로젝트에 src 디렉터리에 Hello.js라는 파일을 만든 후 다음과 같이 작성해보자.하나씩 차근차근 살펴보자.상단에 있던 import logo from './logo.svg';import './App.css';SVG 파일을 불러오고, CSS 를

https://bit.ly/2wMpkk2

컴포넌트 태그 사이에 넣은 값을 조회 할떈, props.children을 사용한다.

특정 조건에 따라 랜더링을 다르게 해야 할 때가 많다. 그럴땐 리액트에서 다음과 같은 방법으로 조건부 랜더링을 수행한다. App.jsx Hello.jsx isSpecial 값이 true 라면 <b>True</b> 를, 그렇지 않다면 null

이제 동적으로 값을 관리해 인터렉티브한 기능을 만들어보자. 리액트 16.8 이후 Hooks 라는 기능이 도입되어 함수형 컴포넌트를 권장하여 쓰게 되었고 함수형 컴포넌트에선 useState를 사용해 주로 값을 관리한다. 간단하게 버튼을 누르면 값이 증가하는

이번에는 사용자의 입력을 받는 input 태그의 상태를 관리해보자. InputSample.jsx App.jsx 여러개의 input 상태 관리 위 예시처럼 하나의 input만 관리한다면 설명 할 것도 없이 간단하겠지만, 대부분 페이지는 여러개의 inpu

Js에서 특정 Dom을 사용할땐, querySelector 혹은 getElementById등의 Dom 선택자를 이용했다. 위 처럼 리액트 환경에선 Dom을 직접 선택하여 컨트롤 할땐 useRef를 사용한다. InputSample.jsx useRef()를

배열 랜더링 하기 아래와 같은 배열 데이터를 랜더링 해보자. Array.jsx jsx에서 js값을 랜더할땐 {}안에 넣어야 한다는걸 우린 안다. 여기서 추가적으로 {}안에 객체는 해당 객체가 가진 내장함수를 이용 할 수 있다. (엄밀히 말하면 return이

useEffect에 2번째 파라미터 배열은 의존값이 들어있는 deps라고 한다. 리액트는 기본적으로 부모 컴포넌트가 리랜더링 되면 자식 컴포넌트도 리랜더링이 된다.useMemo를 통해 이 또한 컨트롤 할 수 있다.

useMemo 개요 Array.jsx 위 코드를 실행시킨 후 입력을 하면서 콘솔창을 살펴보면 입력을 할 때마다. 로그가 찍히는 걸 확인 할 수 있다. 위와 같은 결과가 나오는 이유는 랜더링되는 count가 값은 그대로지만 input값이 바뀌기 때문에 계속 업데이트

useCallback는 useMemo와 비슷한 Hook이다. 리액트에선 컴포넌트가 리렌더링 될 때마다. 컴포넌트안에 변수는 물론 함수까지 새로 만들어진다. 때문에 한번 만든 함수를 필요할때만 새로 만들고 재사용하면서 최적화하는 것도 중요하다. 이전에 만든

이제 React.memo를 사용해 useMemo, useCallback를 이용한 최적화를 완성해보자. Array.jsx 컴포넌트는 원래 안에 내용이 바뀌면 (ex: state, input, 변수 등등..) 리렌더링 된다.React.memo는 감싸준 컴포넌트

지금 까지 상태를 업데이트 할 때에는 useState를 사용해서 새로운 상태를 설정해주었지만useState말고 useReducer를 사용하는 방법도 존재한다. useState는 해당 컴포넌트에서만 관리 가능하지만 useReducer는 컴포넌트에서 밖이나 다른 파일에서

컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들면 input을 관리하거나 서버와 통신하는 로직을 생각 할 수 있다. 이번에는 이러한 상황에 커스텀 훅을 만들어 반복되는 로직을 쉽게 재사용 하는법을 알아보자. hooks/useInputs.js 커스텀

리액트에서 컴포넌트 스타일링을 하는 가장 기본적인 방법은 css 파일을 만들어 import하여 사용하는 것이지만 다른 도구들을 이용하면 다 편리하게 작업 할 수도 있다. Sass Sass (Syntactically Awesome Style Sheets: 문법적으로 짱

React에서 Router가 필요한 이유 React는 기본적으로 SPA 기반이다. SPA(Single Page Apllication)의 약자로 페이지를 하나만 쓰는 어플리케이션이라는 뜻이다. HTML을 해보신 분들은 알겠지만 전통적인 웹어플리케이션의 구조는 여러페이지

리덕스는 왜 사용하는가? 리덕스는 ContextAPI나 useReducer처럼 상태 관련 로직을 따로 분리시켜 효율적으로 관리하기 위해 나온 라이브러리이다. 때문에 리듀서와 리덕스는 공통적인 개념이 많다. 그럼 useReducer만 사용하면 되는거아냐? 라는 의문이

Redux Middleware 리덕스 미들웨어는 리덕스가 지니고 있는 핵심 기능이다. contextAPI, MobX를 사용하는 것과 차별화가 되는 부분이다. 리덕스 모듈 준비 store/counter.js 루트 리듀서에 추가한다. 리덕스 미들웨어 템플릿 리덕스

CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있는 config와 script폴더들을 숨겨놓는다. 이를 커스텀하고 싶다면 npm run eject를 이용해서 숨겨진 config와 script폴더를 추출 할

사용하기 패키지 설치 세팅 > 🔆 devTool은 ReactQuery가 제공하는 개발툴입니다. 필요없다면 제외하셔도 상관없어요 API useQuery Get Method를 위한 훅입니다. 첫번째 파라미터는 api를 구분하기 위한 unique한 key값이 들어갑

프론트개발을 하다보면 드래그 드롭이 UX적으로 적합 할 때가 종종 생깁니다.허나 결과물은 간단한데 기능을 구현하는 과정은 전혀 간단하지 않기때문에 보일러플레이트를 사용해봅시다.드래그앤드롭을 사용하려면 해당 범위의 React 트리를 <DragDropContext>로

Recoil을 사용하기 위한 사전 설정은 Recoil상태관리가 적용될 단위에 <RecoilRoot>로 래핑하면 됩니다.전역적으로 상태관리가 되는 대상입니다. 하나의 atom을 변경하면 그것을 구독하는 모든 컴포넌트들이 리랜더링 됩니다.atom을 생성하기 위해선 고