on&on

CRA에서 제공하는 Custom Templates으로 나만의 템플릿 만들기 Create-react-app에서는 사용자 정의 템플릿을 사용하여 CRA의 기능을 유지하면서 템플릿을 제작할 수 있는 서비스를 제공하고 있다. 사용자가 원하는 형태로 제작할 수 있기 때문에 npm 사이트에 cra-template을 이를 활용한 다양한 템플릿을 볼 수 있다. 자신이 잘 사용하는 리액트 폴더 구조가 있다면 템플릿을 직접 제작하여 사용하는 것도 좋은 방법이고, 또는 다양한 기능을 만들어 오픈 소스로 활용할 수도 있다. 📎 생성 방법 1. create-react-app으로 새 프로젝트를 생성한다. npx create-react-app cra-template-폴더명 ⚠️ 이 때 cra-template으로 프로젝트 이름이 시..

npx create-react-app 사용 시, 기본 파일만 설치하기 처음 React를 사용하는 사람이라면 자주 만나게 되는 명령어인 npx create-react-app npx create-react-app my-app명령어를 통해 설치를 하고 나면 기본적인 React 프로젝트 형태가 갖춰진다. 처음 설치하는 사람이라면 폴더 목록을 보고 당황할 것이 당연한 파일 목록.... 너무 많은 파일이 생성된다... 이 중에 사용하지 않는 파일이 사용하는 파일보다 더 많다... 실질적으로 사용하는 index.html, index.js, App.js 코드를 바꾸고, 다른 파일을 삭제하는 데 시간이 너무 오래 걸린다. 그래서 create react app에서 제공하는 사용자가 직접 커스텀하고 템플릿을 만들 수 있는 ..

props가 무엇인지 이제는 알고쓰자! props의 정의 props는 컴포넌트 속성을 설정할 때 사용하는 요소 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸기 위해서는 부모 컴포넌트에서 바꾸어 주어야 한다. props 기본값 설정 : defaultProps name 값을 지정하지 않아도 기본값을 설정하여 보여줄 수 있다. const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name}입니다. } MyComponent.defaultProps = { name: 'dan' }; export default MyComponent; 위 코드와 값이 defaultPr..

Each child in a list should have a unique "key" prop 목록의 각 자식 요소는 고유한 "키" 값을 가지고 있어야 합니다. 무지성으로 코드를 짜다보면 만나게 되는 경고 이 에러가 발생하는 이유와 React의 key에 대해 간단하게 알아보자 아래의 코드를 실행시켰다. // Sample.js import React from "react"; const IterationSample = () => { const names = ["눈사람", "얼음", "눈", "바람"]; const nameList = names.map((name) => {name}); return {nameList}; }; export default IterationSample; // App.js import..