React

DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다.querySelector, addEventListener와 같은 DOM API를 통해 문서의 요소들을 조작할 수 있다.리액트의 Virtual DOM 실제 DOM의 복사본이며, 자바스크립트

Create React App의 줄임말로 손쉽게 최신의 리액트 앱을 설정할 수 있다. 이미 바벨 설정이나 웹팩 설정이 다 되어 있는 프로젝트로 만들어 주기때문이다.그래서 cra를 사용하면 빌드도 npm run build으로 간단하게 할 수 있다.번들링: 단순하게 여러

장바구니에 상품 추가 기능을 구현할 때 상품목록을 state로 관리해야한다면 상품목록은 store에 저장한 후 상태 변경이 필요할 때는 reducer를 통해 변경해준다. actions의 payload에 추가할 상품의 정보를 담아 dispatch를 통해 reducer의

프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태예를 들어 라이트모드/다크모드 설정, 언어 설정 등이 전역상태로 관리해야한다.특정 컴포넌트 안에서만 관리되는 상태데이터 무결성이란 데이터의 정확성 보장을 위해 데이터의 변경이나 수정에 제한을 두는 것데이터 무결성을 위한

onClick={removeTags(index)}처럼 함수를 호출하게되면 함수 호출의 결과값이 할당된다. 함수 removeTags가 아무것도 반환하지 않는다면 onclick 프로퍼티엔 undefined이 할당되므로 이벤트가 원하는 대로 동작하지 않는다. 그러므로 onC

리액트는 상태가 변경되면 리렌더링한다. 그래서 돔을 직접 사용하는 것이 더 간단한 상황이 발생할 수 있다. 이때 useRef를 사용한다.예를 들어 포커즈를 바꿀 때 전에 입력한 내용이 남아있어야하는데 리렌더링되어 전에 입력한 내용이 날아간다. 이경우 useRef를 사용

상태변경함수 => 동기적 => 왜 비동기적으로 동작을 하니? => batchingbatching : 여러개의 상태변경함수가 있다고 할게요. => 여러개의 상태변경함수 모아서일괄적으로 처리한 후 업데이트 한 내용을 1회의 리-렌더링으로 처리합니다.리액트 자체적으로 렌더링

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다.React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오는 경우 이벤트를 활용해 DOM 직접 조작하는 경우오직 함수의 입력만 함수의 결과에 영향을

리액트의 데이터는 위에서 아래로 흐르는 단방향이다. 그래서 컴포넌트는 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 하위 컴포넌트에 전달할 수 있다.만약 두개의 자식 컴포넌트가 하나의 상태에 접근하고자 한다면 부모의 컴포넌트에 상태를 위치시켜야 두 자식 모두

state 상며서 변할 수 있는 값컴포넌트 내부에서 변할수있는값props는 외부로부터 전달받은 값

한 개의 페이지로만 구성된 애플리케이션이다. 한 페이지만 불러온 후 기존 페이지의 내부를 수정해서 보여주는 방식이다.서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 갱신이 필요한 부분만 데이터를 받아 해당 부분만 업데이트하는 웹 애플리케이션이다.여러개의 페이지

1.상태 변경 이벤트 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체 생성2\. Action 객체 Dispatch 함수의 인자로 전달3\. Dispatch 함수는 Action 객체를 Reducer 함수로 전달4\. Reducer 함수는 Action 객체의

CDD

📖React 🏷️리액트 특징 및 장점 리액트느 ui에 집중한 자바스크립트 라이브러리이다 라이브러리이므로 추가적으로 필요한 모듈 설치해야한다. 프레임워크는 장점 ui를 쉽게 구현할 수 있다.(querySelector로 하나하나 엘리먼트를 불러오지 않아도됨) 자바

npx creat-react-app --template typescript 실행하면 기본으로 작성되어있는 파일이지만 자세하게 어떤 코드인지 알지 못 하고 항상 넘어갔었는데 이번 기회에 정리해보고한다.

리액트를 사용해 개발을 할 때 여러개의 컴포넌트로 나누어 개발한다. 하지만 컴포넌트가 많아지면 렌더링 시 렌더링해야할 컴포넌트가 많아질 수 있다. React.memo() 사용하면 이를 개선할 수 있다. 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는