본문 바로가기

코딩병원

HOME

Frontend/React (53)

[React] Virtual DOM vs DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다. Virtual DOM을 알아보기 전에, 먼저 DOM이 무엇인지부터 제대로 짚고 넘어가야 합니다. [DOM이란?] Document Object Model의 약어입니다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다. 코딩병원에 오신 것을 환영합니다. itprogramming119 * 위 소스 HTML의 DOM 트리 [DOM은 과연 느릴까요?] 요즘 DOM API를 수많은 플랫폼과 웹 브라우저에서 사용하는데 이 DOM에는 치명적인 한 가..

[React] 쿠키 값, 시간 설정하는 방법

[쿠키란?] 쿠키란, 사용자가 접속한 웹 사이트의 서버를 통해 사용자 컴퓨터에 설치되는 정보를 말합니다. 보통 크롬과 같은 웹 브라우저에 쿠키가 저장됩니다. 쿠키는 사용자 정보를 저장하거나 마케팅을 위한 목적으로 사용될 수 있습니다. [react-cookies 설치] cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install react-cookies --save [예제] 예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다. react-cookies를 통해 쿠키 만료 시간을 10년 후로 설정해보겠습니다. App.js import React, { Component } from 'react'; import CookiesSave from '...

[react] redux 미들웨어 정리 및 예제

[미들웨어란?] redux 미들웨어는 액션을 dispatch 함수로 전달하고 리듀서가 실행되기 전과 실행된 후에 처리되는 기능을 말합니다. redux 패키지에서 지원하는 applyMiddleware 함수를 사용하면 미들웨어를 간단하게 구현할 수 있습니다. [미들웨어 생성] 스토어 > 액션 > 미들웨어 > 리듀서 > 스토어 순으로 데이터가 기록이 됩니다. CallMiddleWare 함수는 다중 커링 구조로, 세 가지 인자를 순서대로 받습니다. 첫 번째 인자는 store, 두 번째 인자는 다음 미들웨어를 호출하는 함수로 예제에서는 미들웨어가 1개이기 때문에 reducer를 호출합니다. 커링(Currying) 함수 const CallMiddleWare = store => nextMiddle => action ..

[React] redux-logger 사용 방법

redux 미들웨어를 사용하여 개발을 진행할 때, 리듀서가 실행되기 전과 실행된 후를 log로 비교할 때 보기 어려웠던 점을 redux-logger 라이브러리로 보다 편리하게 확인하여 비교할 수 있습니다. [redux-logger 설치] cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install --save react-redux [적용] 여러개의 미들웨어도 적용 가능합니다. 미들웨어가 여러개인 경우 인수 순서대로 진행이 됩니다. import {createStore, applyMiddleware} from 'redux'; import {createLogger} from 'redux-logger'; import reducers from './re..

[React] react-redux 정리 및 예제

[Redux란?] 1. Redux 등장 배경 MVC 패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였습니다. 즉, 양방향 데이터 흐름이었죠. 양방향 데이터 흐름은 복잡하고 데이터 흐름을 판단하기 힘든 구조입니다. 이러한 해결방법으로 단방향 데이터 흐름이 있습니다. 그게 바로 Redux입니다. Redux는 MVC 패턴에서의 단점을 개선하는 것이 목적이었고 그 해결책으로 단방향 데이터 흐름을 적용하였습니다. View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨줍니다. 이때 Action은 반드시 Dispatcher를 통해서 데이터가 변경됩니다. 변경된 데이터를 Store를 통해 View가 전달받습니다. 2. Redux ..

[React] redux 데이터 변경하는 방법

[redux란?] redux는 컨텍스트와 마찬가지로 데이터를 필요한 컴포넌트에서만 요청해 사용할 수 있습니다. 컨텍스트는 부모 컴포넌트에서 생성한 데이터에 모든 자식 컴포넌트에서 접근할 수 있습니다. 하지만 redux에서는 컴포넌트 외부의 스토어라는 곳에서 관리합니다. 그래서 컴포넌트의 위치에 상관없이 스토어에 접근해 데이터를 사용하고 변경할 수 있습니다. redux는 데이터를 스토어 > 컴포넌트 > 액션 > 리듀서 > 스토어의 과정을 통해 변경합니다. [redux 세팅] 혹시 redux가 설치가 안되어 있다면, cmd 창을 열어 작업하고 계신 프로젝트 경로로 이동해서 아래 명령어를 입력하면 설치가 완료됩니다. npm install --save redux [예제] 예제를 통해서 어떤 식으로 동작하는지 알..

[React] Context로 부모 데이터 변경하는 방법

Props는 데이터가 부모에서 자식 컴포넌트로 단방향으로만 이동할 수 있습니다. 하지만, Context를 사용하면 자식 컴포넌트에서 부모 컴포넌트의 데이터를 변경할 수 있습니다. [예제] 예제를 통해서 어떤 식으로 동작하는지 알아보도록 하겠습니다. 버튼을 클릭하면 ContextApi 컴포넌트의 state 값을 가져오는 예제입니다. App.js import './App.css'; import ContextApi from './Component/ContextApi'; function App() { return ( ); } export default App; ContextApi.js import React from 'react'; import Children from "./contextChildren"; co..

[React] Context 사용 방법 및 예제

Context란? 리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있기 때문에 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨주는 것이 일반적입니다. 그러나 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수록 코드는 복잡해집니다. A컴포넌트에서 제공하는 데이터를 D컴포넌트에서 사용하려면 props를 하위 컴포넌트로 필요한 위치까지 계속해서 넘겨야 합니다. 이러한 기법을 props drilling이라고 합니다. 이러한 props drilling을 극복하기 위해 등장한 개념이 바로 Context입니다. Context를 사용하면, 이러한 명시적인 props 전달 없이도 선언한 하위 컴포넌트 모두에서 자유롭게 원하는 ..

[React] 고차 컴포넌트란? (HOC, Higher-Order Component)

고차 컴포넌트는 컴포넌트 로직을 재사용하기 위해 사용되고 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 즉, 컴포넌트를 인자로 받거나 반환하는 함수입니다. * 하이오더 컴포넌트(HOC, Higher-Order Component) 라고도 많이 불립니다. [주의 사항] render 메서드 안에서 고차 컴포넌트를 사용하시면 안됩니다. 컴포넌트의 정의 바깥에 HOC를 적용하여 컴포넌트가 한 번만 생성 정적 메서드는 반드시 따로 복사해야 합니다. 메서드를 반환하기 전에 컨테이너에 복사 hoist-non-react-statics를 사용하여 모든 non-React 정적 메서드를 자동으로 복사 정적 메서드를 컴포넌트와 별도로 내보내기 ref는 전달되지 않습니다. React.forwardRef API 사용 [예제..

[React] Ref란?

Ref는 'reference'의 약자로, '참조'라는 뜻입니다. react에서 element의 값을 얻거나 수정할 때 보통 javascript, jquery를 사용합니다. 이때 id나 class와 같은 속성으로 element에 접근합니다. Ref를 사용하면 element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있습니다. [Ref를 사용해야 할 때] 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 Ref 사용을 지양해야 합니다. 예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen 이라는 pr..

[React] onKeyDown, onKeyUp, onKeyPress 차이

기존의 자바스크립트에서는 onkeydown, onkeypress, onkeyup 명으로 이벤트를 사용했었습니다. 하지만, react에서는 onKeyDown, onKeyPress, onKeyUp 이벤트는 camelCase 형식의 명칙을 사용합니다. onKeyDown, onKeyUp은 키를 누르고 떼는 동작 자체에 반응합니다. 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter를 인식하고 한/영, Print Screen은 인식하지 못합니다. onKeyPress는 위와 달리, 문자가 실제로 입력됐을 때 반응합니다. Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter, 한/영, Print Screen 등을 인식하지 ..

[React] 함수형 컴포넌트 사용하기

함수형 컴포넌트 클래스형 컴포넌트는 state, 라이프 사이클 기능, render 함수 등을 제공해줍니다. 함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없습니다. 하지만, 함수형 컴포넌트는 이러한 기능들을 제공하진 않지만 hook의 도입으로 해결이 가능하게 되었습니다. 공식문서에는 클래스형 컴포넌트보다는 함수형 컴포넌트와 hook을 사용하는 것을 권장하고 있습니다. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하기 때문에 render() 함수가 없으므로 return만 사용해 화면을 그려줍니다. 따라서, 클래스형 컴포넌트보다 선언도 편하고 메모리 사용도 덜한 효과를 갖고 있습니다. 소스 예제 함수형 컴포넌트를 사용하는 간단한 코드를 보며..

[React] props 기본값으로 정의하기

props 란? React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props 기본값으로 정의하기 defaultProps를 이용하여 props의 기본값을 정의해주시면 됩니다. 정말 간단한 코드를 보며 살펴보겠습니다. App.js (상위 컴포넌트) import './App.css'; import TestComponent from './Component/TestComponent' function App() { return ( ); } export default App; TestComponent.js (하위 컴..

[React] jQuery 사용 방법

이번 글에서는 React에서 jQuery를 사용하는 방법에 대해서 알아보도록 하겠습니다. jQuery는 가장 인기 있는 자바스크립트 라이브러리인데요. 이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해주고 있습니다. 이러한 jQuery를 React에서 사용하려면 어떻게 해야되는 지 알아보도록 하겠습니다. 1. CMD창을 열어 해당 프로젝트 경로로 이동해서 [npm install jquery]를 입력합니다. 2. jquery를 임포트해줍니다. import $ from 'jquery'; 이러면 세팅이 끝나 제이쿼리 사용이 가능합니다. 아주 간단하죠? 확인해봅시다. 다음은 h2 태그를 클릭하면 알림창이 나오는 예제입니다. import React, { Component }..

[React] props란?

props 개념 React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props가 어떤식으로 코드에서 사용되는지 간단한 예제를 통하여 알아보도록 하겠습니다. 아래의 예제는 "hello, hayan”을 렌더링하는 예시입니다. const Welcome = (props) => { return hello, {props.name} } ReactDOM.render( , document.getElementById('root') ); // 출력 결과 hello hayan 위의 예시는 다음과 같은 일들이 일어납니다. 1. ..

[React] state란?

state 개념 state는 함수 내에 선언된 변수처럼 컴포넌트의 렌더링 결과물에 영향을 주는, 데이터를 갖고 있는 객체입니다. 아래의 코드를 통하여 state가 어떤식으로 코드에서 사용되는지 알아보도록 하겠습니다. class Welcome extends React.Component { constructor(props) { super(props); this.state = {name: 'mindragon'}; // 2. 직접 state를 세팅 } render() { return( Hello, {this.state.name} // 3. state의 name 값 호출하며 렌더 ); } } ReactDOM.render( , // 1. Welcome 컴포넌트 호출 document.getElementById('ro..

[React] && 연산자로 If문 처럼 표현하기

JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. function GetUnreadTextInfo(props) { const unreadTexts = props.unreadTexts; // ['react', 'test', 'hello'] return ( Hello! {unreadTexts.length > 0 && // unreadTexts.length = 3 You have {unreadTexts.length} unread texts that are {unreadTexts.join(', ')} } ); } const textZip = [ 'react', 'test', 'hello'] Re..

< 1 2 3 >

티스토리툴바