320x100 front-end/React15 [React]Hook: useLayoutEffect useLayoutEffect란? useEffect와 비슷한 이름을 가진 useLayoutEffect는 사용방법은 같지만 실행원리는 다르다. useEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useLayoutEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useEffect는 렌더링된 요소가 화면에 그려진 후 비동기적 으로 실행된다. 그러나 useLayoutEffect는 렌더링 후 요소가 화면에 그려지기 전에 동기적으로 실행된다. 그래서 데이터를 가져오는 시간이 오래걸린다면 그 시간만큼 사용자는 빈 .. 2022. 12. 5. [Redux]리덕스의 기본개념 리덕스란? 모든 상태를 하나의 저장소(store)에서 관리하는 상태관리 라이브러리다. 리액트로만 프로젝트를 진행하게 될 시 규모가 클 수록 local state와 global state를 관리하기 어렵다는 단점이 있다. 하지만 리덕스를 사용하게 되면 하나의 store를 통해 모든 state를 저장, 유지할 수 있게 되며, 원하는 컴포넌트로 데이터를 전달 할 수 있게된다. 리덕스는 html, js 내에서도 사용이 가능하지만 컴포넌트간에 상태관리를 하는 리액트와 함께 쓰면 높은 시너지를 낼수 있기 때문에 리액트에서 많이 사용한다. 주요 키워드 액션 (Action) 액션 생성함수 (Action Creator) 리듀서 (Reducer) 스토어 (Store) 디스패치 (dispatch) 구독 (subscribe).. 2022. 8. 24. [React]Hook: customHook Custom Hook이란? 사용자가 중복되는 로직을 하나로 묶어 언제든 재사용할 수 있게 만든 hook이다. 주로 자주 사용되는 input이나 fetch의 로직에 활용되기도 한다. - 사용 시 use를 앞에 적어준다. - return값으로는 배열 또는 오브젝트가 들어와야한다. (배열또는 객체의 수는 추가가 가능하다.) 예시 아래와 같은 input로직을 커스텀 훅으로 바꿔준다면.. App.js ... const [inputs, setInputs] = useState({ username:'', email: '', }) const {username, email} = inputs; const onChange = (e) => { const {name, value} = e.target; setInputs({ ..... 2022. 8. 24. [React]Hook: useContext useContext 란? context는 부모가 자식컴포넌트에게 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해준다. useContext는 context를 좀더 편하게 사용할 수 있도록 도와주는 hook이다. Context API 3가지 주요 개념 - createContext(initialValue) - Context.Provider - useContext(Context) createContext(initialValue) -> 부모컴포넌트에 작성 context객체를 생성한다. Provider와 Consumer 를 반환한다. Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다. Consumer : context의 변화를 감시하는 컴포넌트이.. 2022. 8. 23. [React] Hook: useReducer useReducer란? 복잡한 상태 관리가 필요한 컴포넌트에 적합한 Hook이다. useReducer 함수 const [state, dispatch] = useReducer(reducer, initialState, init) 파라미터 설명 state: 컴포넌트에서 사용할 State(상태). dispatch: reducer 함수를 실행시키며, 컴포넌트 내에서 state의 업데이트를 일으키기 위해서 사용하는 함수. reducer: 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수. 현재의 state와 action 객체를 인자로 받아서, 기존의 state를 대체(replace)할 새로운 State를 반환(return)하는 함수. initialState: 초기 값 init: 초기 함수 인자로 들어.. 2022. 8. 16. [React]Hook: useMemo()와 useCallback() / React.memo() useMemo 란? (Hook) 성능 최적화를 위하여 특정 결과값을 재사용 할 수 있다. (useMemo의 Memo는 Memoization을 뜻한다. 이것은 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다.) useCallback 이란? (Hook) 성능 최적화를 위하여 특정 함수를 재사용 할 수 있다. React.memo 란? (고차 컴퍼넌트(Higher Order Component, HOC) 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다. 오직 props변화에만 의존하는 최적화 방법이다. useMemo(function, deps) const value = useMemo(() => { return fn(); },.. 2022. 8. 16. [React]Hook: useEffect() seEffect() 란? 컴포넌트가 렌더링 될 때 특정 작업을 한번만 실행하거나 의존성 배열이 있는경우 변경이 될때마다 실행을 도와주는 훅 입니다. useEffect(function, deps) import React, { useEffect } from "react"; //import하기 useEffect(() => { },[]); 파라미터 설명 function: 실행하고자 하는 함수(콜백함수) deps: 배열형태, function을 실행시킬 조건이다. 크게 세가지 경우로 나뉜다. deps에 특정값을 넣는경우: 컴포넌트가 mount 될 때 + deps 값이 업데이트될 때 useEffect를 실행한다. 빈 배열일 경우: useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않.. 2022. 8. 15. Json-server 사용하기 (REST API 구축 라이브러리) Json-server란? 목업 REST API 를 구축해주는 라이브러리이다. 프로토타입이나 토이프로젝트에 사용하기 좋다. 설치 (1) json-server설치 npm install json-server --save-dev (2) json서버 실행. 실행을 해주면 db.json파일이 생성이 된다. json-server --watch db.json (3) 포트변경 (기본포트는 3000이다) http://localhost:4000/posts 에 들어가면 db를 볼 수 있다. json-server --watch db.json --port 4000 axios 설치 axios란 REST API Client이다. 데이터를 주고받는데 필요하다. npm install axios 2022. 6. 15. [React]git hub배포하기 1. 프로젝트에 gh-pages 패키지를 설치 npm install gh-pages --save-dev 2. package.json 파일을 열기 (1) "homepage" 주소를 추가 "homepage": "http://{사용자 이름}.github.io/{저장소 이름}" (2) script 부분에 predeploy, deploy 를 추가 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } 3. 터미널창을 열어 npm run deploy를 실행 npm run deploy 4. github의 repository에서 settings -> pages에 들어가 source를 gh-pages로 변경. 2022. 5. 28. [React] 천단위마다 쉼표 넣는 방법 금액을 입력하기위해 1,000단위마다 ,(콤마)를 찍어주는 방법을 찾아보는데 아래 사이트에서 npm만 설치하면 자동으로 콤마가 찍히는 아주 기똥찬 패키지를 발견했다. 개꿀~~!! https://www.npmjs.com/package/react-currency-input-field react-currency-input-field React component for formatting currency and numbers.. Latest version: 3.6.4, last published: 4 months ago. Start using react-currency-input-field in your project by running `npm i react-currency-input-field`. Ther.. 2022. 5. 23. [React] Fragments 란? 기존 문제점: 를 로 감쌀 시 렌더링된 HTML은 유효하지 않는다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( // 자식요소인 를 div로 묶어 주게 된다면 Hello World ); } } // 의 출력 결과 // div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않는다. Hello World Fragment 사용방법 // 첫번째 방법 // 두번째 방법(import하기) import React, { Fragment } from 'react' // 세번째 방법(단축키) :단점- key 사용을 못함. 장점 Fragment.. 2022. 5. 22. [React] nanoid 나노아이디 https://www.npmjs.com/package/nanoid nanoid A tiny (116 bytes), secure URL-friendly unique string ID generator. Latest version: 3.3.4, last published: 18 days ago. Start using nanoid in your project by running `npm i nanoid`. There are 4339 other projects in the npm registry using nanoid. www.npmjs.com 나노아이디란? 자바스크립트용 작고 안전한 랜덤문자열 생성기이다. import { nanoid } from 'nanoid' model.id = nanoid() //=> ".. 2022. 5. 21. [React] react-scroll-motion 사용하기 DEMO https://1000ship.github.io/react-scroll-motion/ 설치하기 # Use npm npm install react-scroll-motion # Use yarn yarn add react-scroll-motion 코드 예시 https://github.com/1000ship/react-scroll-motion/blob/master/_readme/docs.md import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-mot.. 2022. 5. 4. [React]'Recoil' 상태관리 라이브러리 사용하기 공식문서: https://recoiljs.org/ko/docs/introduction/installation 1. 설치하기 //npm 설치 npm install recoil //yarn 설치 yarn add recoil 2.사용방법 (예제-Character Counter 만들기) (1) RecoilRoot: 부모트리에 로 감싸준다 //App.js import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( //->감싸주기 ); } (2). Atom Atom은 상태(state)의 단위를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽.. 2022. 4. 21. React 설치 및 기타설치 모음 🐶 01 React 설치 준비하기 //(1)버전확인해서 node.js 안깔려있으면 사이트들어가서 설치하기 $ node -v $ npm -v //--------------------------------------------------------------- //(2)npx 설치하기 npm install npx -g //npm install -g에서 -g옵션은 시스템 디렉터리에 패키지를 설치하는 것을 의미한다. //-g 옵션이 없다면 module은 현재 디렉터리 내부에 로컬로 설치된다. //--------------------------------------------------------------- //(3)작업파일 생성 npx create-react-app my-app //'my-app'은 폴더이름이.. 2022. 4. 1. 이전 1 다음 320x100
