REST API Django REST Framework DRF와 리액트 연동 방법을 바로 알고싶다면 이 글을 참고해주세요!!! [장고/리액트] 리액트와 장고(DRF) 연동하기- (3) CORS 해결, 리액트, 장고 연동 - 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 React-Practice로 했다. yarn create react-app React-Practice RestAPI.css와 RestAPI.js를 추가해주었다. css는 앱을 보기 좋게 하기 위해 추가한 거라 필.. breathtaking-life.tistory.com 보통 프로젝트는 프론트엔드와 백엔드가 협업하여 진행하는데, 작업이 분리가 되지 않는다면 동시에 작업해야 해서 번거로워질 수 있다. 해결책은 백엔드는 API로 프론트엔드에..

코드 분할이 왜 필요한지는 이전 글 참고! [리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자 breathtaking-life.tistory.com 리액트 16.6 버전 이전에는 import함수로 비동기 로딩하고, 컴포넌트를 state에 넣어서 코드 분할을 하였다. 그 이후부터는 내장 함수 React.lazy와 Suspense 컴포넌트로 코드 분할을 할 수 있다! - state를 사용한 코드 분할 (클래스형 컴포넌트) [sayHi.js] 모두 안녕하세요!! 인사를 해준다. expor..

- 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자바스크립트뿐만 아니라 모든 CSS 파일도 하나의 번들 파일로 합쳐진다. 웹팩 페이지를 들어가면 바로 뜨는 사진인데, 사진을 보면 이해가 쉬울 것이다!! - 왜 하나로 합쳐야 할까? 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 포함한다. 이 스크립트가 많아진다면, 네트워크 비용도 높아지고, 병목현상도 생기게 된다. 즉, 비효율적이게 된다!! 웹팩의 장점을 더 알고싶으시다면 공식 페이지를 참고 바랍니다...🤗 Why webpack | webpack webpack is a module bundler...

useReducer는 useState보다 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다. useReducer의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 뺄 수 있다는 것이다!! - useReducer를 알아보기 전에 reducer(리듀서)에 대해 알아보자. 리듀서는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아서 새로운 상태를 반환하는 함수이다. [예시] function reducer(상태, 액션) { switch (액션.type) { case "증가": return { value: 상태.value + 1 }; case "감소": return { value: 상태.value - 1 }; default: return 상태; } } reducer라는 함..

리액트로 프로젝트를 하다가 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_을 꼭..

변화가 없는 컴포넌트가 렌더링 된다면 낭비가 발생하게 된다. 그래서 렌더링이 언제 발생하는지를 알아두고 최대한 낭비를 막는 게 중요하다. 참고) 렌더링이 일어나는 시점은 - state나 props가 변경될 때 - 부모 컴포넌트가 변경될 때 - forceUpdate()가 호출될 때이다. 렌더링을 우리 눈으로 직접 확인하기 위해서는 크롬 익스텐션인 react developer tool이 필요하다 Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 설치했다면, 다음 과정을 따라해주면 된다. (아주 간단!!) 개발자 도구를 열어보면 Components 탭이 새로 생겼다!! 탭에 들어가서 톱니바퀴를 클릭해준다. General에 있는..

오늘 해볼 실습은 버튼을 클릭하면 요소(컴포넌트)가 보이고, 다시 버튼을 클릭하면 숨겨지게 하기!! 여기서 '보이기' 버튼을 클릭하면, 버튼은 '숨기기'로 바뀌고, Input창에 입력한 이름, 나이, 전화번호가 출력된다. [Myinfo.jsx] 컴포넌트의 이름은 Myinfo이며 코드는 다음과 같다. useState로 3개의 속성(이름, 나이, 전화번호)을 만든다음 onChange 이벤트 세 가지를 만들어주었다. 하지만, 이글의 핵심은!! 버튼 클릭시 어떻게 요소를 표시하고 숨기는 것이다!!! App.jsx에 다음과 같이 코드를 적어준다. [App.jsx] 코드를 위에서 아래로 설명하기보다 핵심만 설명하겠음!! 우선 15번째 줄을 보면, AND 논리연산자가 나온다. (만약 논리 연산자를 모르겠다면 밑 링크..

[예시 - 결과, 코드] 버튼을 클릭하면 숫자를 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(); }} > +..

리액트를 공부하며 필요한 익스텐션을 정리해보았다. - Auto Import - ES6, TS, JSX, TSX Auto Import - ES6, TS, JSX, TSX - Visual Studio Marketplace Extension for Visual Studio Code - Automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript and TypeScript. [Forked] marketplace.visualstudio.com 파일명을 입력하면 자동으로 import가 된다. [예시] 만약 SearchHeader라는 컴포넌트가 있고, 다른 파..

useEffect() = 어떤 effect를 발생시키는 Hook - 컴포넌트가 등장할 때, 그리고 컴포넌트가 업데이트가 되고 나서 항상 실행된다. - useEffect를 통해 클래스형 컴포넌트에서 사용 가능했던 생명주기 메서드를 함수형에서도 사용 가능해졌다. [참고] 리액트 훅에 대한 글 [리액트] React hook 간단하게 알아보기 참고) 한국어 버전 공식 문서이다. Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이는 단순히 리액트 hook을 공부한 지 얼마 안 된 나의 생각을 정리하고자 쓴 글이.. breathtaking-life.tistory.com useEffect에 대한 설명은 짧게 하도록하고,..