개발자 퉁이리

Keys React는 효율성을 높이기 위해 key 속성을 지원한다. key를 통해 기존 트리와 비교하여 업데이트 이후 트리의 자식들과의 일치 여부를 확인하고 변경한다. 간단한 list를 map함수를 사용하여 예제를 들어보자! const Tooo1 = () => { const m = [1, 2, 3, 4]; return ( {m.map((v, i) => ( {v} ))} ); }; export default Tooo1; 위 코드를 실행하면 다음 결과가 나온다. 너무 당연한 결과다. 정상적으로 코드가 실행되었다!! 그렇지만 브라우저에서는 경고를 보내고 있다. 경고의 원인은 map함수에 key 값을 안 넣어서 그렇다. Key 값을 왜 넣어야 할까? 우선 key는 React가 어떤 항목을 변경, 추가 또는 삭제..

ViteJS vite는 빠르고 간결한 빌드 도구다. 웹 프로젝트 규모가 계속해서 커짐에 따라 빌드를 하는 시간도 그만큼 길어지고 있다. vite는 이러한 문제를 해결할 수 있는 능력을 가지고 있다. 프랑스어로 빠름을 의미하는 vite는 그 이름에 걸맞게 엄청나게 빠른 빌드 속도를 자랑한다. 지금부터 CRA의 대항마인 vite를 사용하여 React 프로젝트를 생성해보자 Vite는 원래 Vue용으로 개발되었지만 React, Svelte 등 거의 모든 웹 프레임워크를 지원하고 있다. Vite가 현재 지원하는 템플릿 JavaScript TypeScript vanilla vanilla-ts vue vue-ts react react-ts preact preact-ts lit lit-ts svelte svelte-t..

※대학생이 공부하면서 작성한 글입니다※ ※이 글은 CRA로 만들었을 시 기준입니다※ env env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다. 🛑 env 주의사항 🔴 root 폴더에 생성해야 한다. root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다. 🔴 변수명은 반드시 'REACT_APP_'으로 시작해야 한다. 'REACT_APP_변수명' 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다. *process.env.REACT＿APP＿는 예약어다. 🔴 .gitignore에 env를 등록해야 한다. .gitignore에 등록해주어야 git에 등록할 때, 파일이 올라가지 않는다. *기본으로 세팅이 되어있지만 확인해주도록 하..

FLUX FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다. FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다. MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고, 복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다. 위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다. FLUX 패턴 FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. FLUX 요소 Action Dispatcher Store View 🔥 Action Action은 데이터 상태 변경을 도와준다. Action 생성자는 type과 payload를 묶어 Dispatc..

Redux-Persist React의 Redux-Persist를 사용하면 새로고침을 해도 데이터가 지속적으로 유지된다. 이 글에선 Redux-Persist를 Redux-Toolkit과 함께 사용하여 알아볼 예정이다. 먼저 프로젝트를 설치하자 CRA 설치 # Redux + Plain JS template npx create-react-app my-app --template redux 기존 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 파일 구조 ├── README.md ├── node_modules ├── package.json ├── public └── src 새로고침을 해도 데이터를 유지하는 것을 적용하기 전에 먼저 현재 상태를..