React.js 치트 시트

본 시리즈는 자바스크립트 치트 시트 시리즈와 마찬가지로 리액트에 대한 심적 표상 형성을 목표로 하고 있다. 이에 따라 기존에 학습하였던 리액트의 기본 Hooks를 실제 사용되는 패턴의 형태로 요약함과 동시에, 리액트를 다루는데에 있어 자주 헷갈리는 HTML과 CSS를

title : 문서의 제목metaname어트리뷰트 - keywords(검색엔진 최적화에 사용할 키워드), description(웹페이지의 설명), author(웹페이지의 저자)<meta name="description" content="Web tutorials o

yarn 설치 : npm install --global yarnCRA : npx create-react-app 폴더명 혹은 yarn create react-app 폴더명실행 : npm start 혹은 yarn startGit Bash는 리눅스와 명령어 일치를 위해 사용

자바스크립트는 컨스트럭터와 프로토타입을 기반으로 한다.ES2015부터 클래스 문법이 추가되었다.클래스는 기존 생성자 방식보다 엄격하다.함수가 아니며, 함수로 호출될 수 없다.클래스 선언문 이전에 참조할 수 없다.(let, const처럼 호이스팅은 되지만 접근이 불가능한

useState는 state값과 state를 수정하는 함수를 배열 형태로 반환한다. state의 초기값을 useState의 파라미터로 넘겨준다. const \[value, setValue] = useState(0);useEffect는 컴포넌트가 리렌더링(업데이트)될 때

컴포넌트가 리렌더링되는 과정에서 컴포넌트 내부의 함수들이 지속적으로 호출되고 연산된다.useMemo(콜백함수, 의존자배열)은 의존자 배열이 그대로인 경우 콜백함수를 호출하지 않도 memoization된 값을 사용한다.컴포넌트가 리렌더링 되는 과정에서 컴포넌트 내부의 함

리액트에서 DOM을 직접 조작할 때에는 DOM 요소에 ref라는 어트리뷰트를 준다.useRef()는 ref로 사용될 변수명을 생성할 대 사용한다. 한편 useRef()가 전역 저장소에 저장됨을 이용하여 전역 객체로서 임시로 사용할 수 있다.객체 지정하기const 변수명

Sass는 자식 요소를 들여쓰기로 구분하는 문법을 지원한다. 이를 통해 구조화한 표기가 가능하다.SCSS는 중괄호가 없는 Sass에서 CSS의 방식으로 중괄호를 추가한 방식이다. Sass와 마찬가지로 CSS로 컴파일 된다.Sass는 다음의 기능을 지원한다.Nesting

콜백 : 다른 함수에 인수로 넘겨주는 함수. 호출(call back)되어 실행(execute)될 목적으로 인수로 넘기는 함수이다.setTimeout(콜백함수, 지연시간ms) : 특정시간 이후 콜백함수를 실행한다. clearTimeout(함수명)을 통해 스케줄링을 취소할

디자인 패턴 중 상태 패턴은 Context 클래스에서 인터페이스를 제공하여 State로 캡슐화하는 것을 의미한다.참조리액트에서의 Context는 전역적(global)으로 데이터를 공유하기 위해 사용되도록 디자인되었다. 즉 데이터 간의 간격과 컴포넌트 트리의 계층이 없이

하나의 상태 저장소와 이를 변경하는 Dispatcher를 통해 단방향 순환 구조를 갖는 것.Action - Dispatcher - Model - View 의 구조를 갖는 패턴을 의미한다.Model(Store)라는 하나의 상태를 가지며, 계층 구조가 없이 흐름이 단방향이

리액트 함수형 라이프 사이클에 따르면, useMemo는 component가 마운트되기 직전에 실행된다. useState() 역시 비동기적으로 처리된다.이에 따라 useEffect내부의 함수 등의 비동기 함수와는 사용할 수 없다. 함수의 선언 순서대로 작동한다는 보장을

벨로퍼트와 함께하는 리액트 테스팅(https://learn-react-test.vlpt.us/유닛 테스트 : 작은 단위로 테스트함통합 테스트 : 여러 컴포넌트 들이 서로 상호작용 하면서 잘 하고 있다.테스트 자동화 : 코드를 수정, 리팩토링 할 때에, 통합 테

테스팅 라이브러리의 Async Method를 이용하여 테스트할 수 있다.

https://apis.map.kakao.com/web/ 이 곳에서 따라하면 된다.카카오 아이디로 로그인 후,이름 입력하고 가입하고,https://developers.kakao.com/console/app 에서 새로운 앱을 등록하면API가 뚝딱 나온다

Recoil은 매우 간결한 상태관리 툴이다.'하나의 원천'을 강조하는 Redux와는 달리여러 Atom으로 상태를 관리한다.이러한 Atom은 React에서 사용하는 'useState'에서의 상태와 일맥상통하며,결과적으로 React의 함수형 컴포넌트에 잘 녹아드는 문법으로

리액트 쿼리는 비동기 작업을 요청하고, 캐싱하고, 업데이트하는 상태관리 라이브러리이다.대부분의 상태를 서버로부터 받아온다는 점을 감안하여, 각 API와 비동기 작업, 그리고 그로 인해 발생되는 데이터를 하나의 식별자로 묶어 상태관리를 하는 개념이다.Redux에서의 비동

리액트 쿼리는 비동기 작업을 요청하고, 캐싱하고, 업데이트하는 상태관리 라이브러리이다.대부분의 상태를 서버로부터 받아온다는 점을 감안하여, 각 API와 비동기 작업, 그리고 그로 인해 발생되는 데이터를 하나의 식별자로 묶어 상태관리를 하는 개념이다.Redux에서의 비동

useMutation는 훅이기 때문에 useQuery와 같은 방식으로 추상화가 불가능하다.useMutation이 컴포넌트 내부에서 mutate를 반환하도록 커스텀 훅을 만들고,반환된 mutate를 컴포넌트 내부에서 실행해야만 작동이 된다. (컴포넌트 외부에서 바로 mu

인프런 강의 따라하며 배우는 리액트 테스트를 보며 요약 및 실습한 내용.리액트 컴포넌트를 테스트하는 가장 기본적인 방법은 react-dom/test-utils의 유틸함수들을 사용하는 것이다. 그리고 보다 간편한 방법을 위한 테스티용 라이브러리들이 있다.기존에는 2015

앞서 설명했듯 react-testing-library는 DOM 위주로 테스트를 진행한다. 이에 따라 돔을 지정하는 Queries를 사용한다.(querySelector를 사용하는 방법도 있지만 권장하지 않는다.)주로 사용되는 쿼리는 다음과 같으며, 순위가 높을수록 권장되

Mobx는 객체지향 느낌의 라이브러리보일러 플레이트코드로 Component와 State를 연결하는 방식과 달리 데코레이터를 통해 해결한다.@observable 데코레이터로 지정한 state는 관찰 대상으로 지정되고, 그 State는 값이 변경도리 때마다 렌더링 된다.