나만의 깍두기판

1. react 세팅npm init react app .npm run start 2. 프로젝트 세팅1) public 폴더index.html 파일만 남기고 전부 다 지우기index.html에서 불필요한 내용 전부 지우기 2) src 폴더index.js 파일만 남기고 전부 다 지우기 index.js에서 불필요한 내용 전부 지우기

Create React App(CRA)은 더이상 관리되지 않는 프로젝트임 → 프로젝트 생성에는 Vite 도구를 쓰는 것이 권장됨빈 폴더를 만들고 터미널에 아래 코드 실행npm create vite@latest . -- --template react필요한 패키지들(실행에 필요한 코드들)을 설치, 설치에 시간이 꽤 걸릴 수 있음npm install 설치가 끝나면 node_modules 폴더 새로 생김. 아래 명령어로 실행npm run dev React v18 이후 문법2022년 3월 8일 이후로 리액트의 18 버전이 나옴index.js 파일에서 코드를 쓰는 방식(Vite에서는 src/main.jsx)이 바뀜과거에는 ReactDOM.render() 함수를 사용하던 문법에서 ReactDOM.createRoot(..

1. node.js 설치2. vscode 설치3. 로컬 컴퓨터에 작업할 폴더 생성4. 해당 폴더에서 vscode 열기5. 아래의 커맨드 실행create-react-app으로 리액트 프로젝트 생성npm  init react-app 혹은 폴더를 VS Code로 열고 터미널에서 npm init react-app .개발 모드 실행npm run start개발 모드 종료Ctrl + C 6. 리액트 개발자 도구 설치react developer tools 검색 - chrome 웹 스토어 들어가기 & 추가 버튼을 눌러 설치https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer ..

1. forEach와 map의 차이forEach는 새로운 배열을 return 하지 않기 때문에 Virtual Dom에서 변경 사항이 없다고 판단하고 리랜더링하지 않는다.따라서 특정 결과값을 얻기 위해서는 map을 사용해야 한다. * li로 전달해줄 때는 자식 요소를 찾을 수 있는 고유의 key 값이 필요하다.Food 컴포넌트에 key 속성 전달! 1) FoodContainer.jsimport React from 'react';import Food from './Food';const FoodContainer = () => { const foods = [ { id : 1, name : "샐러드", }, { id : 2, name : "치킨", }, ..

Redux - 상태 관리 라이브러리이며, 리액트 뿐만 아니라 모든 JS코드에서 동작한다. - Flux 패턴을 기반으로 생성되었기 때문에 단방향으로 동작하여 흐름을 파악하기 쉽고 예측 가능하다. Redux 패턴 - Flux와는 다르게 하나의 App에 하나의 Store가 존재하고, Flux 패턴을 좀 더 쉽게 사용할 수 있는 라이브러리이다. - Component -> Action -> Reducer -> Store -> State -> Component 1) 컴포넌트(Component) - Action이 발생한다. - 나중에 변경된 State를 반영하기 위하여 Store가 Subscribe(구독)을 해 놓는다. 2) 액션(Action) - 변화가 필요할 때 발생하는 신호이다. - Dispatch()로 감싸서..

Flux 패턴View -> Action -> Dispatcher -> Store -> View Action : 클릭을 하거나, 이벤트가 발생했을 때 타입을 전송한다.Dispatcher : action에서 발생한 타입을 분류하여 알맞는 로직이 실행되도록 한다.Store : 이전 값과 상태 변화 값을 확인한 후 state의 변화를 저장하는 곳View : 상태 변화가 된 것을 리랜더링 시킨다.

Context API란?- 리액트의 내장 API(16버전 이상)중 하나로 Props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있도록 도와주는 API Props의 드릴링이란?- A.jsx ~ Z.jsx까지 있다고 가정할 때 부모(A 컴포넌트)부터 최하위 자식(Z 컴포넌트)까지 Props를 보내는 과정을 드릴링이라고 한다. Context API는 언제 사용할까?- 변화가 없는 것, 즉 다크모드/화이트 모드 등 값이 선언되어 있는 상태로 변화가 없는 상태의 변수를 지정한다.- context는 상태를 변화시켜주는 기능이 아니다. Context의 단점- Provide 컴포넌트는 Value를 Props로 받아서 하위 컴포넌트에게 전달한다.- 이 과정에서 Value가 업데이트 되었을 때 리랜더링이 ..

https://npmtrends.com/ npm trends: Compare NPM package downloadsWhich NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner.npmtrends.com우리가 react를 배워야 하는 이유... react가 많은 비율을 차지하고 있음.이미 만들어져 있는 프로젝트들이 대부분 react기 때문에 react를 배워야 함.그렇다고 vue와 angular가 react보다 극도로 좋냐? 그건 아니다. 이미 많은 것들이 react고, vue와 큰 차이가 없기 떄문에 굳이 비용을 넣으며 바꿀 필요성..