Hook9 [React] React18에서 추가된 Hook React 18버전에 새롭게 추가된 Hook이 몇가지 있다. ▶ useId ▶ useTransition ▶ useDeferredValue ▶ useSyncExternalStore ▶ useInsertionEffect 사실 추가가 되었다고 사용해보지는 않았다. ( 사용성이 있는지는 의문...! ) useId 유니크한 Id 값을 만들어주는 Hook이다. 이게 끝이다 ㅋㅋ.... 태그에 id 값을 넣어야 하는 경우 const passwordField = () => { const passwordId = useId(); return ( ... ) } 다음과 같이 사용할 수 있다. 이렇게 사용하면 id 가 중복으로 들어가는 경우를 방지할 수 있겠지만, 굳이 사용해야할까? 라는 의문은 있다. id 를 고민하는 일이 .. 2023. 4. 17. [React - 기초] Hooks 1. Hooks? Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함 Class 컴포넌트의 단점으론 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 패턴을 사용해서 해결해야 했다. 그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 2. 복잡한 컴포넌트들은 이해하기 어렵다. 데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가 있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 그것으로 인해서 버.. 2022. 3. 10. [React] 비동기 작업(콜백 함수, Promise, async, await) 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신한다. 이 경우 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 요청이 끝나야 비로소 다음 예정된 작업을 할 수 있다. 하지만 비동기적으로 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 .. 2022. 2. 8. [React] useLayoutEffect useEffect랑 useLayoutEffect 둘 중 useLayoutEffect 먼저 화면에 랜더링 된다. useLayoutEffect?? useEffect와 비슷한 역할을 한다. useEffect는 보통 화면이 랜더링 된 후 실행이 되지만, useLayoutEffect는 화면의 리사이징, 즉 레이아웃의 변환을 감지하는 Effect이다. 정리하자면 useEffect -> 화면이 완전히 바뀌고 난 후 발생 useLayoutEffect -> 화면이 바뀌기 전 발생 2022. 2. 8. [React] useRef Javascript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택해야 한다. 리액트를 사용하는 프로젝트에서도 마찬가지로 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나, 설정하든지, 또는 포커스를 설정해줘야 한다던지 등, 생각보다 다양한 상황이 있다. 그리고 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용할 때도 특정 DOM에다가 적용해야 한다. 이럴 때, 리액트에서는 ref라는 것을 사용한다. .. 2022. 2. 8. [React] useEffect useEffect??? componentDidMount와 componentDidUpdate, componentWillUnmount 클래스 컴포넌트에서 제공하는 Lifecycle API를 useEffect를 사용하여 대신할 수 있다!! render가 발생할 때마다 (componentDidMount ⇒ 초기, componentDidUpdate ⇒ 매번) effect가 실행된다. 여기서 두 번째 파라미터인 inputs를 통해 특정 상태가 update 되었을 때만 effect가 실행되게 설정할 수 있다. 만약 useEffect의 inputs에 빈 배열을 넘겨주면 최초(componentsDidMount)에만 실행된다. componentWillUnmount를 실행하기 위해선 return을 사용하여 기능 수행이 가능.. 2022. 2. 8. [React] useState useState?? useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 아니!! 근데 이런 걸 왜 쓰는 겨?? state는 리액트에서 동적인 부분을 담당한다!! 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션(상호작용)에 따라 바뀌어야 하는데 우리가 일반적으로 사용하는 let, const 변수는 정적인 변수여서 화면에 리렌더링이 되지 않는다. 그런 상황에서 state없이 개발을 진행한다면.... 어라? 전부... 정적?? 에라이 ! 와장창!!! 할 수 있기 때문에 동적으로 값이 바뀌는 state를 사용한다. import React, { useState } from 'react'; function Example() { //.. 2022. 2. 8. [React] Hook Hook?? Hook은 React 16.8 버전에서 새로 추가되었다. Hook 은 클래스 컴포넌트를 작성하지 않아도 상태 값과 여러 React의 기능을 사용할 수 있다. 즉, 함수형 컴포넌트에서 React state와 생명주기(lifecycle features)를 연동할 수 있게 해주는 함수 Hook의 특징?? 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 하지만 Hook이 필요 없는 상황이라면 굳이 Hook을 사용할 필요는 없다! 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다! 현재 사용 가능 : Hook은 리액트 v16.8.0에서 사용할 수 있다. 2022. 2. 8. [React] React-lifecycle 모든 리액트 컴포넌트는 라이프사이클이 존재한다. 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지할 필요가 있을 수 있다. 바로바로 이때! 라이프사이클 메서드를 사용한다. 이러한 라이프사이클 메서드는 클래스형 메서드에서만 사용이 가능하고 함수형은 Hook으로 작업! 라이프사이클 메서드의 종류는 총 아홉 가지로, Will 접두사가 붙은 메서드는 어떤 작업을 하기 전, Did 접두사는 어떤 작업을 작업한 후 실행되는 메서드이다!! 라이프 사이클은 또 3가지, 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount).. 2022. 2. 8. 이전 1 다음 반응형
