일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- linux
- deep learning
- Babel
- Node
- Go
- fastapi
- phpredis
- CentOS
- Redux
- NCP
- mariadb
- SQL
- laravel
- 기초 수학
- Switch
- rabbitmq
- AWS
- 블레이드 템플릿
- python
- Machine Learning
- React
- nodejs
- docker
- webpack
- For
- Backbone.js
- nginx
- javascript
- Redis
- php
- Today
- Total
목록React (21)
개발일기
useSelector는 리액트의 리덕스 스토어 관련 Hook중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우( 버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다. 1. useSelector 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux useSelector를 사용하기 위해서는 react-redux를 설치해야 한다. 2. useSelector 형식 import { useSelector } from 'react-redux'; const fruitList = us..
redux의 액션 생성함수를 실행하여 리덕스 스토어에 변경된 상태값을 저장하기 위해서는 useDispatch라는 리액트 훅을 사용하여 액션을 실행시켜야 한다. 1. useDispatch 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux react-redux에 useDispatch라는 객체가 속해있기에 설치해준다. 2. useDispatch 선언 import { useDispatch } from 'react-redux'; cosnt dispatch = useDispatch(); // dispatch로 재선언하여 사용한다. useDispatch객체를 dispatch로 재선언한 후, dispatch 변수를 활용하여 액션을 호출할 수 있다. ..
1. 리액트의 상태관리(props) 리액트에서 컴포넌트간의 상태관리를 위해 각 컴포넌트들의 상태값을 props로 넘겨 주고받는 방법으로 상태관리를 하였다. 프로젝트의 규모가 소규모라 나뉘어진 컴포넌트와 기능들이 적은 경우 props로 간단하게 상태관리를 할 수 있다. 하지만, 이와는 반대로 프로젝트의 규모가 커지는 경우 원하는 컴포넌트로 상태값들을 전달하려 할 때, 4~5 개의 컴포넌트들을 지나쳐 값을 전달하는 경우가 종종 발생한다. 불필요한 컴포넌트들을 거쳐 값을 전달하여 관리하려면, 값을 전달할 때 마다, 불필요한 작업을 반복적으로 해야하고, 실수를 통해 에러가 발생할 수도 있다는 단점을 가지고 있다. 각 컴포넌트 간에 value={value} 형식으로 값을 주고받는다. 컴포넌트가 적은 소규모 프로젝..
1. useState? useState는 리액트에서 컴포넌트의 상태값을 관리할 수 있도록 도와주는 React Hook중의 하나이다. import React, { useState } from 'react'; // useState를 사용하고자 할 경우, useState를 import 해야 한다. const [ 현재 상태값 변수, 상태값을 바꿔주는 setter 함수 ] = useState( 기본값 ); // useState 사용법 const [ option, setOption ] = useState(false); // useState 사용 예시 보통 상태값을 바꿔주는 setter함수명을 정할 때는, 상태값 변수 앞에 set를 붙인 함수명으로 지정한다. useState() 안에는 해당 변수의 기본값이 들어가게 ..
React Hook 중에는 useEffect라는 Hook이 존재한다. useEffect란 리액트에서 기본적으로 제공해주는 함수로써, useEffect함수가 포함된 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경되거나 redux store의 값이 변경될 때 실행할 구문들을 정의해놓은 함수이다. 0. useEffect import방법 import { useEffect } from 'react'; react가 설치되어있으면 추가적으로 설치할 것 없이 위와같이 파일 상단에 추가하면 useEffect를 손쉽게 사용할 수 있다. 1. useEffect의 기본 형태 useEffect(() => { ... // 실행할 내용들 }); useEffect의 기본 형태는 위와 같다. 위..
useEffect를 사용할 경우, 메모리 누수가 발생하였다면서 다음과 같은 에러문구가 콘솔창에 나오는 것을 종종 확인할 수 있다. Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function 이 경우는 useEffect를 사용했을 때, cleanup function을 반환하지 않았기 때문에 발생하는 오류이다. 다음과 같이 cleanup function을 추가하면 에러가 사라지는 ..
Route exact와 Switch의 간단 정리 위의 소스코드를 바탕으로 경로를 / 로 이동할 경우 Main, Water, Juice 컴포넌트 3개가 전부 렌더링된다. Route는 경로가 부분적으로 일치하는 컴포넌트도 렌더링하는 특성을 가지고 있기 때문이다. 의도치 않은 렌더링을 위해 exact를 사용한다. / 경로로 이동할 경우 Main컴포넌트만, /water 경로로 이동할 경우 Water 컴포넌트만, /juice 경로로 이동할 경우 Juice 컴포넌트만 렌더링되게 된다. 즉, 경로가 완벽히 일치하는 컴포넌트만 렌더링 하게된다.
1. react-router-dom 설치 npm install react-router-dom yarn add react-router-dom React에서 route기능을 사용하려면 우선적으로 react-router-dom을 설치해야 한다. 2. import 부분 import { Route, Router, Switch, Link } from 'react-router-dom'; 라우트 기능을 사용할 때 많이 사용되는 4가지 모듈을 불러온다. Route path : 주소창의 경로를 지정한다. exact : 주소창의 경로와 완벽하게 일치할 때, 이 라우트의 컴포넌트를 보여준다는 의미한다. component : 보여줄 컴포넌트를 의미한다. Route 컴포넌트는 path옵션을 통해 주소창의 주소와 일치하는 컴포넌트..