리액트 기초/React hooks

Custom hooks

Custom hooks? 반복되는 로직을 재활용하기 위해 사용한다 Custom hook은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위해 사용한다 Custom hook을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가진다! 규칙 함수 명이 use로 시작해야 한다. 최상위에서만 호출할 수 있다. 리액트 함수 내에서만 호출할 수 있다. 꼭 return 값을 주자. 사용법 아래 코드를 보면 여러 개의 input에 ref를 부착해서 state의 값을 onChange 함수를 이용해 변경시켜서 span 태그 안의 내용을 변경키고 있다. 하지만 중복되는 useState, useRef 훅과 onChange 함수가 존재한다. 이 중복되는 로직들을 따로 분리해서 간결하고 재사용성이 높은 CustomHook..

useCallback

useCallback() useCallBack()는 함수를 메모이제이션 하기 위한 훅 메모이제이션이란 쉽게 말해 메모리 어딘가에 저장해두고 나중에 쓰겠다는 것이다. 함수형 컴포넌트가 리렌더링되면 컴포넌트 안에 선언해둔 함수나 인라인으로 작성한 함수를 다시 한 번 생성하게 된다. 예를 들어 어떤 컴포넌트가 총 10번 렌더링된다면 그 안에 작성해둔 함수들도 10번 만들어지는거고 이건 메모리 관리에 그리 효율적이지 않다. 주로 자식 컴포넌트에게 전달해주는 콜백 함수를 메모이제이션할 때 쓴다. useCallback() 사용법 우선 useCallback을 임포트해야 한다 import { useCallback } from "react"; useCallback('콜백 함수', '의존성 배열') 첫번째 인자는 실행할 ..

React Hooks?

React Hooks 리액트 훅은 16.8에 추가되었다. 리액트 개발은 훅 이전이 old 한 방식이라면 훅 이후는 완전히 다른 모던한 방식이라 앞으로 리액트를 개발할려면 반드시 사용해야 할 기술이다. 함 규칙 function(함수형) 컴포넌트에서만 사용할 수 있다. 클래스 컴포넌트에서 hook을 사용하면 안된다. 또한 단순한 자바스크립트 펑션에서 hook을 사용해서는 안된다 Top level에서만 사용할 수 있다. 루프내에서나 혹은 내부 함수나 조건문에서 사용해서는 안된다. 반드시 리액트 함수형 컴포넌트의 top 레벨에서 사용해야 한다. 특징 completely opt-in 훅을 적용하고 싶으면 적용할 수 있고, 원하지 않는다면 적용안할수도 있는 선택 옵션이다. 100% backwards-compatib..

부모 컴포넌트에서 자식 컴포넌트 함수 호출하기

Why use? 자식 컴포넌트에서 이벤트를 발생시키지 않고 부모 컴포넌트에서 이벤트를 발생시켜서 자식 컴포넌트의 이벤트를 발생시켜서 데이터를 가져오려면 어떻게 해야할까? 부모 컴포넌트에서 ref를 만들어서 자식 컴포넌트에게 props로 넘겨주면 되지 않을까? 하지만 리액트에서 특수한 prop인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다. 이를 위해서는 몇 가지 hooks가 필요하다. React.forwardRef 리액트에서 특수한 props인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다. HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 한다. React 컴포넌트를 f..