# hooks

hwang-eunji

기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용참고 : 책 : 실전 리액트 프로그래밍/이재승 저

hwang-eunji

componentDidMount() 보다 먼저, 최초 1회만 실행되어야 한다.useEffect로 componentDidMount() 구현하기(https://velog.io/@hwang-eunji/React-Hooks-3-useEffect\[useEffect로

hwang-eunji

useEffect() 는 비동기useLayoutEffect() 는 동기useLayoutEffect() 훅의 로직에서 연산이 많으면 브라우저가 먹통이 될 수 있으니 주의!앵간하면 useEffect() 사용하고, 렌더링 직후 돔요소의 값을 읽는 경우 useLayoutEff

hwang-eunji

리액트 공식문서 - useImperativeHandle(https://ko.reactjs.org/docs/hooks-reference.html자식컴포넌트의 메서드 호출할 수 있도록 한다.forwardRef() 와 함께 사용한다.부모 컴포넌트에서 입력한 ref객

hwang-eunji

메모이제이션(memoizaition) \- 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술 \- React.memo()사용. (ToastUI - React.memo() 현명하게 사용하기)

hwang-eunji

클래스형 컴포넌트에서 createRef()를 hooks에서는 useRef()로 사용한다.컴포넌트가 마운트 되고 DOM 요소에 접근 가능해 졌을 때DOM 요소에 포커스(focus), 외부 요소 클릭 이벤트(out-side-click-event) 적용할 때렌더링과 무관한

hwang-eunji

React에서 기본으로 제공하는 useState, useEffect 등의 훅을 사용해 새로운 훅을 만들어낸다.창의 너비를 알려주는 훅컴포넌트의 마운트 여부를 알려주는 훅(HOC보다 훨씬 간결하게 사용가능하며, 타입스크립트와의 호환도 좋다!)훅의 호출 순서는 동일해야 한

hwang-eunji

react 공식문서 Context 살펴보기컨텍스트는 여러게를 만들수 있다(다중스토어)React.createContext에서 반환값으로 <컴포넌트.Provider>로 최상위 컴포넌트를 감싼다.생성 컨텍스트컴포넌트는 export 하여 <컴포넌트.Consumer>

hwang-eunji

네트워크 리퀘스트(GET,POST,DEL..)DOM 수동 조작로깅정리(clean up) : 타이머함수(인터벌같은)제거, 이벤트리스너 제거useEffect(CB) : componentDidMount(), componentDidUpdate()useEffect(CB,\[])

hwang-eunji

useState는 길이 2짜리 배열 반환 : 값, 그리고 값을 변경할수 있는 함수배열 구조분해 할당(Destructuring) 사용하여 배열 분리하여 사용인자로 초기값 전달, 해당 값 초기화 기능 있을 경우, 초기값 변수 사용 추천!클래스형 컴포넌트에서는 state객체

hwang-eunji

codevolution-useContext+useReducer최상위 루트 컴포넌트useReducer로 상태관리할 state, dispatch 생성export Context = React.createContext() 로 context 생성<Context.Provid

junghyunhao

hooks&styled-component

solmii

React의 함수형 컴포넌트와 Hooks의 useState, useEffect 에 대해서 정리해보자!!

cyongchoi

Redux-Actions

cyongchoi

일단 내가 아는것. Ref는 reference DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기 스크롤박스 조작하기 canvas 요소에 그림 그리기 위의 예로 화면의 button클릭시 input 창에게 focus 효과를 주는것이다. 우리가 알아야하는것은 useRef(null) 기본 값은 null 이다. 왜냐면 아직 function...

cyongchoi

숫자,문자열,객체 를 재사용 하기 위해 사용.함수를 재사용 하려면 사용조금 더 배우고 내용 더 추가해야겠다..오늘 처음 본것들이 너무 많다..😂

cyongchoi

redux 에 reducer가 있다.. reducer 는 현재 상태, 그리고 업데이트를 위해 정보를 담은 액션(Action)의 값을 전달 받아 새로운 상태를 반환하는 함수이다

cyongchoi

리액트에 lifeCycle이 있다. useEffect 는 componentDidMount, componentDidupdate 을 합친것이라고 생각하면 된다.clean으로 componentDidUnMount 도 가능한걸로 안다..

cyongchoi

setState 대신 useState로 상태관리!!!

cyongchoi

Result:방법 1 (OnChange 를 2개를 만들어서 실행) input 이 두개 일때는 괜찮은 코드방법 2 (OnChange 1개로 실행) 많은 input 이 있을경우 e.target.name: e.target.value 가 뭐지??? Dynamic (동적