state가 초기화될 때 함수가 단 1회만 실행되어 값이 할당되는 방식을 lazy init이라고 한다. - Bad const getNumbers = () => { const candidates = [1,2,3,4,5,6,7,8,9]; const array = []; for(let i=0; i { const [answer, setAnswer] = useState(getNumbers()); } 4개의 숫자를 랜덤으로 돌려 answer에 할당하고자 할 때 getNumber()을 넣어주게 되면, 컴포넌트가 재렌더링될 때마다 다시 getNumbers()함수가 실행된다. 이 함수가 정말 무거운 함수였다면 시스템 전체의 부담이 되었을 것이다. (비효율적, 불필요한 반복) - good const getNumbers =..
1. 웹팩 데브 서버와 핫 리로딩 설정 왜 해주는 건데? react로 개발을 하다가 수정을 할 때 변경 사항을 확인하기 위해 계속 빌드를 반복해야한다. 개발자한테 이 반복작업은 매우 귀찮으며, 시간이 걸리는 작업이다. 하지만, 빌드 작업과 테스트를 위한 클릭 및 입력 작업이 생략될 수 있다면?획기적인 시간 단축을 기대할 수 있을 것이다. 우린 이것을 웹팩 데브 서버를 설치하고, 핫 리로딩 설정을 해줌으로써 빌드 과정을 자동화한다. 2. 핫 리로딩하는 2개의 패키지 npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D 그런데 이 핫 리로딩 패키지 없어도 리액트에서 그냥 리로딩되는데? 구지해줘야하나? 그것은 그냥 리로딩이다. 핫리로딩이랑은 다르다. 리로딩..
1. Intro create-react-app을 하면 자동으로 리액트 설정을 다 해준다. 대신에 우리는 create-react-app이 하는 일, 기본원리를 이해할 수 없다. 그래서 직접 1번 셋팅해보는 게 좋다. 2. 웹팩을 왜 쓸까? 유지보수성을 높일 수 있다. 하나의 HTML 파일에 2만 개의 컴포넌트를 담게되면 유지보수가 거의 불가능하다고 볼 수 있다. 실제 과거 페이스북 컴포넌트는 2만 개라고 한다 : ) 중복을 줄일 수 있다. 컴포넌트 파일을 만든다. (jsx로 만드는게 좋다. x하나가 더 붙어 리액트 파일임을 개발자가 직관적으로 알 수 있다) //컴포넌트 파일을 쪼개는 경우 필요한 패키지와 라이브러리 const React = require('react'); const {Component} =..
1. Intro 리액트에서는 클래스형이 아닌 함수형을 쓰라고 권장한다. Hooks와 함께 쓰면 간결한 코드 작성이 가능하다. (코드 수가 줄어듬) 하지만 클래스형을 아예 몰라도 되는가? NoNo! 과거 클래스로 코드를 짰던 팀에서는 class 코드가 잔재하기 때문에 알아두면 좋다. Hooks는 use가 써져있는 것들을 말한다. 2. useState 1) class state를 1개로 묶어줬다. state가 변경될 때마다 render가 재렌더링 된다. class GuGuDan extends React.Component{ state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '..
npm i styled-components npm i slick-carousel npm i react-slick import styled from "styled-components"; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import { PlayerSelectAtom } from "../../atom/PlayerSelectAtom"; import { useRecoilState } from 'recoil'; const VerticalSlider = () => { const settings = { arrows: false, inf..
import React from "react"; const Closet = () => { return( ); } export default Closet; 브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해주어야 한다. 리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transfomer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이 때 객체인 React를 가져오기 위해서 import React from 'react'를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다..
넘나 많은 데이터... 공공데이터로 이 엑셀 데이터를 쓰고 싶은데 js 파일로 노다가를 할 수도 없고, 대체 어떻게 하면 모든 정보를 json으로 바꿔다 쓸 수 있을까? 나는 local_code와 work_code 엑셀파일의 수 천개의 데이터를 읽어올 것이다. 여기서는 work_code만 작성하겠다. 왜냐? 파일 이름만 다르게 쓰면 로직은 똑같기 때문이다 ^^ 1. 엑셀 데이터 json 변환 코드 [readexcel.js] const express = require('express'); const app = express(); const xlsx = require('xlsx'); const workbook = xlsx.readFile(__dirname + '/work_code.xls'); const js..
useState의 값을 변경할 때 Too many re-renders이 뜬다. 특히 onClick 안에서 useState의 값을 변경할 때 뜬다. //모달 온오프 let [modal, setModal] = useState(false); ... { questionNumber==1 && } 예를 들어 이렇게 setModal을 true로 변경해주려고 한다. 나는 그냥 onClick안에 함수만 써준 격이다... 제대로 양식을 지켜 써줘야 무한 렌더링 오류가 안난다. 기본 js에선 onClick(()=>{~~})이렇게 써줬을텐데 그와 비슷하게 아래처럼 써주면 된다. onClick={()=>{setModal(true)}} 이렇게 써주면 된다 ^^
