[리액트] 개념 정리

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()의 초기값에 아무것도 넣지 않으면, 처음에 돌릴 맵의 정보가 없기 때문에 에러가 뜬다. 이를 방지하기 위

React 핵심 작동 원리 입사 후 React를 꾸준히 사용하고 있습니다. 그래서 무척 친숙합니다. 다만 React를 진짜 깊이 있게 이해하는가 물어본다면 맞다고 답하기 어렵습니다. React는 최소한 잘 아는 개발자가 되고 싶기 때문에 React가 어떤 존재인지,

프론트엔드 멋쟁이들은 이런걸 만들어본다던데 프론트엔드를 진심으로 공부하시는 분들이 해보는 필수 코스가 있습니다. 나만의 리액트 만들어보기....!!!!!! 저도 프론트엔드에 진심이고 React를 꽤나 사랑하기 때문에 직접 만들어보며 리액트의 상세 원리를 코드로 이해