Im Bay

Component Styling 일반 CSS file (React defaults) CSS 파일 import 하여 사용 import ‘./App.css’; className=’xxx’ import styles from ‘./App.css’ className={styles.App} 또는 className={${styles.active} ${styles.bold}} CSS 모듈 import styles from ‘./App.module.css’; .xxx App_xxx__ (파일명_클래스_해시값) 클래스명 중복 방지 및 해당 컴포넌트에서만 사용된다. styled-components 모듈 const Ul = styled.list-style: none;...; ... ... const StyledCompo = ..

React Hooks - local storage localStorage localStorage란 브라우저의 데이터 저장 공간 (Web Storage) domain별 반 영구적으로 보관 가능 (만료기간 설정 불가, 직접 구현) key & value pair (모두 string 타입) 모두 동기적 처리 method getItem, setItem, removeItem, clear 예시 const data = {id: 1, name: 'Hong'}; localStorage.setItem('user', JSON.stringify(data)); JSON.parse(localStorage.getItem('user')); localStorage.removeItem('user'); localStorage.clear()..

React Hooks - useDeferredValue useDeferredValue(state)란 상태 값 변화에 낮은 우선 순위를 지정하기 위한 hook setState 완료하고 set useMemo와 함께 많이 사용된다. 기본형태 import { useDeferredValue } from ‘react’; const [str, setStr] = useState(’’); const deferredStr = useDeferredValue(str); React Hooks - useTransition useTransition(cb)란 상태 변화의 우선순위를 지정하기 위한 hook 모든 setState 완료하고 cb를 call 기본형태 import { useTransition } from ‘react’; co..

React Hooks - useReducer useReducer란 reduce란 기존(현재) 값을 바탕으로 추가 액션을 하는 것 reducer란 기존 값 각각에 해당 액션을 해주는 함수, 이전 상태와 액션을 합쳐서 새로운 상태를 만드는 조작 reducer란 같은 상태를 변경하는 함수들을 한 곳에 모아 놓은 것 dispatcher(action)은 action을 전달하는 함수 (Strict Mode에서는 2회 call) useReducer란 useState (컴포넌트 상태 관리에 쓰이는 hook)를 대체할 수 있는 함수이고 좀 더 복잡한 상태 관리가 필요할 때 사용한다. useReducer의 장점은 setter를 직접적으로 노출하지 않으면서 상태 변경하는 함수(reducer)를 컴포넌트 외부에 둘 수 있다...

React Hooks - useCallback useCallback이란 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 (함수 cache) 메모화된 함수는 자식 컴포넌트에서 re-render시 재호출 방지 한 번만 생성되어야 하는 함수를 전달할 때 사용 사용 기본 형태 React Hooks - useMemo useMemo란 여기서 Memo는 memoization을 뜻하고 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거하여 실행 속도를 올리는 기술이다. 변수를 React Static 영역에 cache 메모화된 변수는 이제 주소가 변하지 않는다. 사용 import import { useMemo } from ‘react’; 기본 형태 const 메모화된_변수 = useMemo(()..

React Hooks - useEffect useEffect란 컴포넌트가 랜더링 될 때 특정 작업(side effect)을 실행할 수 있도록 하는 것 side effect란 컴포넌트가 랜더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과 componentDidMount 시점에 비동기로 실행 (alert, focus, sound 등 After DOM 처리) 함수형 컴포넌트에서 return JSX(render) 다음에 실행 정리(clean-up) 코드는 componentWillUnMount 시점에 실행되고, 의존 관계 배열(Dependency Array)가 비워져 있다면 1회만 실행 된다. import import { useEffect } from ‘react’; 사용 기본 형태 // 기본 useEffe..

React Hooks - useContext useContext란 상태를 공유하는 context (상태 변경 시 모두 다시 랜더링) context는 App 안에서 전역적으로 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법 제공 상위 컴포넌트의 data가 필요한 하위 컴포넌트들은 useContext 훅을 사용하여 데이터를 받아온다. Provider로 부터 Consumer까지 value(state) 공유 Provider의 자식들은 해당 context의 상태를 바로 접근 가능 createContext → Context.Provider → Context.Consumer (useContext) import import { createContext } from ‘react’; import { useContex..

React Hooks - forwardRef forwardRef란 useRef로 부모 컴포넌트에서 외부(자식) 컴포넌트의 DOM 접근할 때 사용 부모에서 선언→ 자신에게 전달→ 자식에서 참조걸기→ 부모에서 컨트롤 import import { forwardRef, useRef } from ‘react’; 사용 예시 App.js에서 const 변수명1 = useRef(); 생성 하위 컴포넌트인 Header 컴포넌트로 전달 Header 컴포넌트에서 const 변수명2 = forwardRef((props, 변수명1) ⇒ { … } ); 생성 그 외 사용 예시 const Header = ({...props}, headerRef) { return ( ); }; export deafult forwardRef(Head..

React Hooks - useRef useRef란 직접 DOM에 접근할 때 또는 값을 담을 때 사용 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환 (ref는 reference 참조!) onChange와 같은 무거운 Event Handler를 사용하지 않아도 된다. useRef를 이용하여 DOM에 접근하면 값이 변경되어도 불필요한 re-rendering을 하지 않는다. (state에 담으면 변경될 때마다 re-rendering) import import { useRef } from ‘react; 변수 선언 const 변수명 = useRef(초기값); useRef는 변수명에 초기값을 적는 식으로 생성한다. {current: 초기값} 을 지닌 객체가 반환된다. 값 변경도 ..

React Hooks - useState useState란 현재 상태를 나타내는 state 값과 상태를 변경하는 setState 값이 한 쌍 state는 초기값을 설정할 수 있으며 초기값은 첫 랜더링 때 한번 사용된다. state는 문자열, 숫자, boolean, 배열, null, 객체 등 다양한 값을 넣을 수 있다. 순수 함수→ 컴포넌트 내에서 변경될 수 있는 값 해당 상태를 소유하지 않은 컴포넌트에서는 props 상태 변수는 read-only이므로 변경은 setter를 이용한다. 변수가 객체(참조)형이면 spread 연산자로 사본을 만들어서 할당 setter에서 값 수신 (setState) react-dom’s flushSync는 동기로 DOM 갱신 (화면 그려지고 난 후에 처리하고 싶을 때) flu..