React
-
클래스형 컴포넌트와 함수형 컴포넌트React 2021. 8. 5. 20:38
📋 클래스형 컴포넌트와 함수형 컴포넌트 리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있다. 그러나 함수형 컴포넌트는 이 모든 일을 할 수 없다. 이 둘의 차이점은 상태값과 LifeCycle를 가질 수 있느냐 없느냐이다. 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었다. 📕 함수형 컴포넌트 ☑️ JSX를 return문을 사용해서 반환 ☑️ state를 사용할 수 없다 ☑️ 생명 주기 함수를 작성할 수 없다 import React from 'react'; function Hello({ color, name..
-
useState HookReact 2021. 8. 2. 22:21
안녕하세요. 이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext 중 useState 에 대해 공부 한 내용을 정리해보겠습니다. Hook이란 특별한 함수이다. Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. (공식문서참조 : https://ko.reactjs.org/) useState Hook이란? useState는 리액트를 배우게 되면 가장 먼저 배우게 되는 함수입니다. useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. State란? state(상태)는 리액트에서 화면을 ..
-
Link와 NavLinkReact 2021. 7. 29. 20:44
리액트는 페이지(URL) 이동할 때마다 서버에서 받는 것이 아니라 자바스크립트가 출력을 해준다. 페이지 경로를 나눠주는 것이 라우터이다. 📗 Link 컴포넌트를 이용한 페이지 이동 는 태그처럼 링크를 연결해주지만 URL 개념 하고는 다른 path 개념이다. 리액트 라우터에서 페이지 이동할 때는 Link 컴포넌트를 사용하면 내가 이동하고자 하는 경로(URL)로 이동할 수 있다. 아래와 같이 사용할 수 있다. About ⭐⭐⭐ Link 컴포넌트를 사용하면 브라우저의 주소만 바꿀뿐, 페이지를 새로 불러오지는 않는다. ✏️ 예제로 Link 컴포넌트 사용해보기 // App 컴포넌트 import { Switch, Route, Link, } from 'react-router-dom'; import Home from ..
-
Redux ThunkReact 2021. 6. 14. 16:45
Redux Thunk 란? 리덕스 창시자인 댄 아브라모프가 만든 가장 많이 사용되는 비동기 작업 미들웨어다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다 📌 미들웨어(middleware)란? 리덕스에서 미들웨어는 주로 비동기 작업을 처리 할 때 사용한다. 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 미들웨어를 활용할 수 있다. 미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수로 액션과 리듀서 사이의 중간자라고 볼 수 있다. 리덕스 미들웨어 라이브러리 redux-thunk, redux-saga, redux-observable, redux-promise-middleware등을 서치하여 사용할 수 있고, 만들어서 사용할 수도 있다. 실제 프로젝트를 작업 할 때에는, 미..
-
react-redux 패키지와 Hooks 사용하기React 2021. 6. 13. 14:50
시작하기 전에.. Hook이란 무엇인가? 번역해보면 "갈고리"라는 뜻을 가지고 있다. 아이스크림을 훅해서 퍼먹는 것처럼 무언가 가져오는 느낌이다. 우리가 React에서 useState라는 Hook을 사용하여 상태를 관리하였다. 마찬가지로 Redux의 상태를 가져와서 사용하려면 react-redux의 Hook을 사용하면 된다. Redux Hook 중 가장 많이 사용하는 useDispatch 와 useSelector 에 대해 알아보자. 📌 리액트 훅이란? 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다. 📌 훅킹(Hooking)이란? 이미 작성되어 있는 코드의 특정 지점을 가로채서 동작 방식에 변화를 주는 일체의 기술이다. react-redux 패키지 설치하기 먼저 react-..
-
Redux로 상태 관리하기React 2021. 6. 12. 20:50
Redux란? 리덕스는 자바스크립트를 위한 상태 관리 프레임워크이다. 🙋 React를 사용하면 Redux도 같이 사용하는데 그 이유는 뭘까? 결론을 먼저 말씀드리면 Redux로 상태를 관리하기 위해서이다. React는 부모 컴포넌트인 App컴포넌트에서 모든 것(state와 동작)을 관리하고 데이터를 아래로 내려주는 구조로 부모컴포넌트의 데이터를 props로 자식컴포넌트에게 전달해준다. 앱이 커지고 깊은 곳에 있는 자식 컴포넌트에 상태값을 전달할 때 데이터 흐름 파악이 어려워 지고 복잡성으로 관리하기가 어려워지는 문제가 발생한다. 그러나 Redux를 사용하면 state를 중앙에서 상태를 관리하여 상태 관리 코드를 분리하여 사용할 수 있기 때문이다. 공식문서를 읽다보면 Redux는 상태를 관리하기에 좋은 도..
-
Presentational 컴포넌트와 Container 컴포넌트React 2021. 6. 11. 16:53
리액트에서 가장 유명한 패턴인이자 가독성과 생산성을 고려한 방법인 프레젠테이션 컴포넌트와 컨테이너 컴포넌트에 대해 알아보려고 한다. 🔎 Presentational Components 와 Container Components 패턴으로 왜 나누는 걸까? 화면을 표현하는 부분(Presentational Components)와 데이터를 다루는 부분(Container Components)으로 나눠서 개발하는 패턴으로 재사용성과 유지보수의 장점이 있다. 📌 Presentational 컴포넌트 데이터 출력, 데이터 처리 능력은 없음, no logic DOM 마크업과 스타일 담당(UI) Redux와 관련 없음 부모 컴포넌트로부터 받은 Props인 데이터와 콜백(callback)을 사용 📌 Container 컴포넌트 데..
-
useEffect HookReact 2021. 6. 11. 11:29
안녕하세요. 이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext 중 useEffect 에 대해 공부 한 내용을 정리해보겠습니다. useEffect Hook이란? 공식 문서를 보니 아래와 같이 정의 되어 있고, 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다. useEffect(didUpdate); useEffect는 컴포넌트에서 부수 효과 처리할 때 사용하는 훅입니다. 📌 부수 효과란 무엇일까? 함수 실행시 함수 외부의 상태를 변경하는 연산을 부수 효과하고 부른다. useEffect를 언제 사용하면 좋을까? 특별한 이유가 없다면 모든 부수 효과는 useEffect hook에서 처리하는게 좋다. Hook에 대해 더 알고 싶다면 공식 문서를 ..