리액트21 [리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components 코드 분할이 왜 필요한지는 이전 글 참고! [리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자 breathtaking-life.tistory.com 리액트 16.6 버전 이전에는 import함수로 비동기 로딩하고, 컴포넌트를 state에 넣어서 코드 분할을 하였다. 그 이후부터는 내장 함수 React.lazy와 Suspense 컴포넌트로 코드 분할을 할 수 있다! - state를 사용한 코드 분할 (클래스형 컴포넌트) [sayHi.js] 모두 안녕하세요!! 인사를 해준다. expor.. 2021. 8. 23. [리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자바스크립트뿐만 아니라 모든 CSS 파일도 하나의 번들 파일로 합쳐진다. 웹팩 페이지를 들어가면 바로 뜨는 사진인데, 사진을 보면 이해가 쉬울 것이다!! - 왜 하나로 합쳐야 할까? 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 포함한다. 이 스크립트가 많아진다면, 네트워크 비용도 높아지고, 병목현상도 생기게 된다. 즉, 비효율적이게 된다!! 웹팩의 장점을 더 알고싶으시다면 공식 페이지를 참고 바랍니다...🤗 Why webpack | webpack webpack is a module bundler... 2021. 8. 21. [리액트] useReducer - 다양한 상태를 업데이트 하기 useReducer는 useState보다 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다. useReducer의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 뺄 수 있다는 것이다!! - useReducer를 알아보기 전에 reducer(리듀서)에 대해 알아보자. 리듀서는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아서 새로운 상태를 반환하는 함수이다. [예시] function reducer(상태, 액션) { switch (액션.type) { case "증가": return { value: 상태.value + 1 }; case "감소": return { value: 상태.value - 1 }; default: return 상태; } } reducer라는 함.. 2021. 8. 12. [리액트] API 키 숨기기, 환경 변수 401 오류와 undefined 해결 리액트로 프로젝트를 하다가 API 키를 가져와야 할 일이 생겼다. API 키는 아주 소중한 녀석이기 때문에 .gitignore에 추가해주어야 한다!! 마치 내 개인정보와 같다고 보면 된다. 어떻게 숨겨주어야 하는지 알아봅시다~! 401 에러가 발생할 때, .env를 추가했는데 undefined가 뜬다면 맨 밑을 참고 부탁드립니다. 1) dotenv를 설치해준다. yarn, npm 중 편한 걸로 선택해서 설치하면 된다. yarn add dotenv npm install --save dotenv 2) 프로젝트 루트 경로에. env 파일을 생성해준다. (src폴더 안 아님!!) 3) .env 파일 안에 변수를 작성하고 API key를 넣어준다. 리액트 프로젝트에서는 환경변수 이름 앞에 REACT_APP_을 꼭.. 2021. 8. 6. [리액트] 리액트 필수 크롬 확장 프로그램 (react developer tool) 변화가 없는 컴포넌트가 렌더링 된다면 낭비가 발생하게 된다. 그래서 렌더링이 언제 발생하는지를 알아두고 최대한 낭비를 막는 게 중요하다. 참고) 렌더링이 일어나는 시점은 - state나 props가 변경될 때 - 부모 컴포넌트가 변경될 때 - forceUpdate()가 호출될 때이다. 렌더링을 우리 눈으로 직접 확인하기 위해서는 크롬 익스텐션인 react developer tool이 필요하다 Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 설치했다면, 다음 과정을 따라해주면 된다. (아주 간단!!) 개발자 도구를 열어보면 Components 탭이 새로 생겼다!! 탭에 들어가서 톱니바퀴를 클릭해준다. General에 있는.. 2021. 7. 25. [리액트] setState 비동기 해결, 콜백함수 [예시 - 결과, 코드] 버튼을 클릭하면 숫자를 1 더하고 빼는 간단한 컴포넌트를 만들었다. alertNumber()라는 함수를 만들어 현재 숫자가 무엇인지 알려주는 창을 띄어준다. import React, { Component } from "react"; class Counter extends Component { state = { number: 0, }; alertNumber() { alert(this.state.number); } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); console.log(this.state); this.alertNumber(); }} > +.. 2021. 7. 12. 이전 1 2 3 4 다음
