본문 바로가기

JavaScript/React12

[React] SPA 란? SPA(Single Page Application) : 한 개의 페이지로 이루어진 애플리케이션 전통적인 웹 방식(SSR : 서버 사이드 렌더링) 은 사용자가 다른 페이지로 이동할 때마다 새로운 html 을 받아오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주는 방식이었다. 즉, 사용자에게 보여주는 화면은 서버에서 준비했다. 이처럼 전통적인 웹 대부분은 서버 사이드 렌더링 방식이다. 그러나 요즘에는 웹에서 제공하는 정보가 정말 많기 때문에 새로운 화면을 보여줄 때마다 서버에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. (트래픽, 서버에 높은 부하 등) 그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고 우선 애.. 2021. 11. 8.

[React] 함수 컴포넌트에서 리렌더링 최적화를 위한 방법 함수 컴포넌트에서 React.memo() 함수를 사용하는 것만으로 컴포넌트 최적화가 끝나지는 않는다. 예를 들어 최신 상태의 todos 를 참조하는 onClick 같은 함수가 있어서 todos 배열이 바뀔 때마다 함수가 새로 만들어진다고 할 때, 이렇게 함수가 계속 만들어지는 상황을 방지하는 방법은 두 가지이다. 1. useState 의 함수형 업데이트 기능 사용하기 예를 들어 기존에 setTodos 함수를 사용했다고 하면, 이 함수를 사용할 때 새로운 상태를 파라미터로 넣는 대신 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣음으로써 함수형 업데이트를 할 수 있다. setNumber(number+1) 이 아니라 setNumber(preNumber => preNumber + 1) 과 같은 업데.. 2021. 10. 27.

[React] Hooks 정리 💡 useState // useState 함수 사용하기 import { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} 이다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; useState 는 하나의 상태 값만 관리할 수 있으나 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러 번 사용하면 된다. useState(0) 이란 초기값을 0 으로 하겠다는 의미이다. const [value, setValue] 에서 첫 번째 원소인 value 는 .. 2021. 10. 26.

[React] 컴포넌트 알아보기 ✍ 비구조화 할당 const { name, favoriteNumber, children } = this.props; // 비구조화 할당 const { number, fixedNumber } = this.state; // 비구조화 할당 this.props 가 가진 name, favoriteNumber, children 값을 { name, favoriteNumber, children } 에 넣어준다. ✍ constructor 없이 state 초깃값 지정하기 class Counter extends Component { state = { number: 0, fixedNumber: 0 } render(){ const {number, fixedNumber} = this.state; return ( ... ); } .. 2021. 10. 26.

[React] 글쓰기 기능 구현하기 ✍ 필요한 라이브러리 설치 yarn add quill : 글 작성하는 Editor 라이브러리 설치 yarn add styled-components : CSS 관련 리액트 라이브러리 중에서 가장 인기있는 라이브러리 설치 리덕스 확장 프로그램 : https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 리덕스 개발 툴을 다운받으면 크롬으로 react 를 실행시켜서 개발할 때 redux state 변화를 확인할 수 있다. ✍ 구조 1. page 에.. 2021. 10. 22.

[React] Redux 폴더 구조 정리하기 위의 포맷으로 정리를 해보았다. 💡 흐름 : components -> modules(action 생성) -> containers (dispatch, reducer, state 값 변경) -> components (UI) index.js 에서 reducers 임포트 경로 수정하기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reducers from './modules/bpp' import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux' import { .. 2021. 10. 21.

[React] Redux 란? 💡 Redux redux를 사용하는 이유는 state 를 여러 컴포넌트에 전달하고 관리하기가 어렵기 때문에 store 를 통해 여러 컴포넌트에 쉽게 전달하고 관리할 수 있도록 만든다. 즉 Flux 와 같은 구조이다. React 작업환경에서 Redux 사용하기 (라이브러리 설치) npm install --save redux npm install --save react-redux npm install --save redux-actions 💡 흐름 : VIEW -> ACTION -> (STORE) -> REDUCER -> DISPATCH(ACTION) -> STATE -> UI index.js 작성 store 를 생성하고 store 를 에 props 로 전달해서 컴포넌트 트리에 접근할 수 있도록 만든다. 그리.. 2021. 10. 21.

[React] React 이벤트 사용하기 1. onClick onClick 이벤트는 특정 element 가 클릭됐을 때 정의된 함수를 호출하는 방식으로 사용한다. 2. onChange onChange 이벤트는 특정 element 에 변화가 생겼을 때 정의된 함수를 호출하는 방식으로 사용한다. 3. mousemove mousemove 이벤트는 특정 tag 영역 안에서 마우스 커서가 움직일 때 발생한다. 4. onMouseOver onMouseOver 이벤트는 특정 tag 영역 안에 마우스 커서가 진입할 때 발생한다. 5. onMouseOut onMouseOut 이벤트는 특정 tag 영역 안에 마우스 커서가 진입했다가 벗어날 때 발생한다. 6. onKeyDown, onKeyPress, onKeyUp onKeyDown 과 onKeyPress 는 키를.. 2021. 10. 20.

[React] React 에서 bootstrap 사용하기(ReactStrap) 💡 bootstrap 이란? 프론트엔드 디자인을 쉽게 구현할 수 있도록 도아주는 html, css, js 프레임워크이다. 이런 부트스트랩을 react 에서 사용할 수 있도록 패키지로 만든 것이 reactstrap 이다. 01. Alert 사용하기 reactstrap 을 사용하기 위해서는 먼저 reactstrap 을 설치한다. 1. VSCode 로 작업을 하기 때문에 VSCode에서 react 작업을 하는 폴더 경로로 들어가서 터미널을 열고 reactstrap 을 설치하는 npm install --save reactstrap 명령과 bootstrap 을 설치하는 npm install --save bootstrap 을 실행한다. 2. App.js 에서 reactStrapTest.js 파일을 임포트해서 사용할.. 2021. 10. 20.

이전 1 2 다음

티스토리툴바