[리액트] 개념 정리

1\. npx란?npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 새로 추가된 도구따라서 npm 버전이 5.2.0 이상이면 바로 사용 가능2\. npm을 통해 까는 것의 문제점CRA에 포함된 수 많은 의존성 라이브러리들이 컴퓨터에 계속 남아있는다.CR

1\. 리엑트란앵귤러가 웹 애플리케이션 개발에 필요한 다수의 기능을 제공하는 것과는 달리 리액트는 UI 기능만 제공한다. 따라서 전역 상태 관리나 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 한다.가상돔 : 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경된 부

4\. 단일 페이지 어플리케이션(SPA)1) MPA(멀티 페이지 애플리케이션) 와 SPA 비교MPA : 페이지 전환 요청이 다시 서버로 요청을 보내고 서버는 또다시 HTML을 내려주는 방식.SPA : 페이지 전환 요청이 있으면 서버로 항상 요청을 보내는 것이 아니고,

6\. 컴포넌트 함수의 반환값1) div 리엑트 요소2) 컴포넌트3) 문자열, 숫자4) 배열 : 배열로 반환할 때는 리액트 요소가 항상 key를 가지고 있어야 한다. key는 렌더링을 효율적으로 하기 위해서 필요하다. 리액트가 이 값을 이용해서 가상돔에서의 연산을 효율

8. 리액트 훅 1) 리액트 훅이란 컴포넌트에 기능을 추가할 때 사용하는 함수 예로 컴포넌트에 상태값을 추가, 자식요소에 접근하는 등의 기능 추가 과거는 클래스형 컴포넌트 사용 2) useState : 상태값 관리 Hook

9\. 훅 직접 만들기1) 커스텀 훅리액트가 제공하는 훅을 이용해서 커스텀 훅을 만들 수 있다.로직 재사용이 가장 큰 장점.커스텀 훅 만들 때는 훅 이름은 use로 시작하는 것이 좋다.훅은 일반적인 함수로 작성할 수 있다.레고 블록처럼 기존 훅을 이용해서 새로운 훅을

10\. 훅 사용 시 지켜야할 규칙1) 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.if문 안에서 훅을 사용하면 안된다. if문을 사용하게 되면 조건문에 따라 사용하는 훅이 달라질 수 있기 때문이다.for문 안에서 훅을 사용하면 안된다. 반복문의 조건에

11. Context API 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 속성값(Props)을 사용할 수 있다. 가까운 거리에 있는 몇 개의 컴포넌트로 전달할 때는 속성값으로도 충분하지만 많은 수의 하위컴포넌트로 전달할 때는 속성값을 내려주는 코드를 반복적으로

12\. ref 속성값으로 자식 요소에 접근하기리액트로 작업하다보면 실제 돔 요소에 직접 접근해야할 때가 있다.예를 들어, 돔 요소에 포커스를 주거나 돔 요소 크기나 스크롤 위치를 알아야 하는 경우ref 속성값을 이용하면 자식 요소에 직접 접근할 수 있다. 여기에서 자

13\. 리엑트 내장 훅useState - 상태값 관리 설명useEffect - 부수효과 처리 설명useContext - Context API Consumer 기능 사용 설명useRef - 자식 요소에 직접 접근 등 설명1 설명2useMemo - 메모이제이션 기능 설명

라우팅1\. 라우팅 개념, react-router-dom 깔기2\. route 기본 형태3\. react-router-dom 사용하기4\. 라우트 사용 구조 분석5\. 서브 라우트 구현하기1.라우팅사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것r

00\. 들어가기 전에버튼에 따라 동작하게는 다양하게 구현 할 수 있으나, 가장 깔끔하다고 느낀 형태를 기록하고자 한다.01\. 버튼에 들어갈 data useState()로 상태값 선언하기02\. 버튼에 이벤트 관련 함수 설정중요한 점은 같은 온 클릭 함수에서 다른 p

받아온 정보 할당할 때 2항 연산자 사용하여, useState()의 초기값이 없는 설정으로 난 에러 제어하기00\. 들어가기 전에정보를 불러오는 useState()의 초기값에 아무것도 넣지 않으면, 처음에 돌릴 맵의 정보가 없기 때문에 에러가 뜬다. 이를 방지하기 위