코딩 정보/React36 [React] 효율적인 코드 작성을 위한 개념 목차 Fragment자바스크립트는 한 값만 반환이 가능하기 때문에 return할때 묶어주어야 한다.그렇게 되면 묶기위해 불필요한 div를 써야하는데 그 대신 react의 fragment를 사용할 수 있다. import { Fragment } from "react";import ButtonList from "./ButtonList";function Lecture2() { return ( hello world dkdk );}export default Lecture2; 아래 코드를 쓰면 fragment 조차 사용하지 않아도 된다.import ButtonList from "./ButtonList";function Lecture2() { return ( hel.. 2024. 6. 26. [React] 주요 개념 알아보기 목차 index.js 리액트 앱의 진입점 커스텀 컴포넌트 규칙컴포넌트 이름은 대문자로 시작해야 한다.->다른 개발자가 만든 커스텀 컴포넌트와 리액트 내장된 컴포넌트를 구분을 하기 위해서이다. 동적인 값 출력하기import React from "react";const greetArray = ["hello", "hi", "okay"];function getRandomInt(num) { let newNumber= Math.floor(Math.random() * num) ; return newNumber;}//이런식으로 중괄호에 넣어주면 된다.function Lecture1() { return {greetArray[getRandomInt(3)]};}export default Lecture1; 동적.. 2024. 6. 21. [React] 들어가기 전 js 빠르게 정리하기 목차 import / export import * from './app.js';//app.js//export는 한 파일에서 여러개 가능export let key = "123213";export let key2 = "sfes";//util.jsimport {key, key2} from './app.js';console.log(key);console.log(key2);//이런식으로 전체 모듈을 불러올 수 있다.import * as api from './app.js';//이런식으로 .이용해 사용console.log(api.key); //main.html//이런식으로 type 모듈을 지정해 주어야 한다. default//app2.js//이런식으로 변수에 할당하지 않고 사용export default "1231.. 2024. 6. 21. 리액트: build process가 필요한 이유 리액트 project -> build process즉 작성한 코드가 브라우저에서 바로 시작되는 것이 아닌 내부적으로 코드가 수정된다. buile process 필요 이유1. 처리되지 않은 리액트 코드는 브라우저에서 실행할 수가 없기 때문에 필요하다. 즉 jsx문법 -> 표준 js문법 으로 바꾸어주어야 함 2. 작성한 코드가 간소화되지 않았기 때문이다. +++++build process 기능import App from './App'; 이런식으로 원래는 './App.js' 입력해야 했으나 확장자를 빼도 알아서 buildprocess가 추적해준다. 2024. 6. 20. 이전 1 ··· 6 7 8 9 다음 728x90
