본문 바로가기

반응형

유즈

(4)
리액트 훅 - 유즈레프 (돔요소 사용하기) 바닐라 자바스크립트의 경우 돔요소를 동적으로 활용하기 위해 쿼리셀렉터 등 해당 요소를 가져오는 다양한 방법을 제공합니다. 반면, 리액트는 컴포넌트 함수 안에서는 요소에 직접 코드를 작성하는 것이 가능하고 위처럼 다큐먼트객체를 활용하여 요소를 가져올 수 없기 때문에 순수 자바스크립트에서 사용되는 방식은 활용도가 낮습니다. 하지만, 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 방법의 비중이 큰 만큼, 이러한 기능이 존재한다면 알아 두는 것도 좋겠죠. 유즈 레프는 요소에 대한 레퍼런스를 만들고 해당 요소를 활용하는 훅으로 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 것을 가능하게 해 줍니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대..
리액트 훅 - 유즈이펙트 (컴포넌트 상태변화 감지) 유즈이펙트는 리액트의 훅 중 하나로 컴포넌트 등의 상태가 변할 때 이를 감지할 수 있게 해 줍니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 사용방법 사용하고자 하는 컴포넌트에 유즈이펙트를 가져오고 아래처럼 설정합니다. 감지하고자 하는 대상이 있다면 아래처럼 꺽쇠를 추가하고 그 안에 추적대상을 추가하면 대상의 상태가 변화할 때마다 훅이 작동합니다 (이벤트와 비슷) 사용예시 콘텍스트 생성 유즈콘텍스트를 생성하고 아래와 같이 상태를 설정합니다 컴포넌트 생성 테스트를 위한 컴포넌트를 생성하고 유..
리액트 훅 - 유즈콘텍스트 (글로벌 스테이트) 유즈콘텍스트는 리액트의 훅 중 하나로 유즈스테이트와 같이 애플리케이션의 상태를 관리하는 기능을 제공합니다. 다른 점은 연결된 컴포넌트 사이에서만 데이터를 주고받을 수 있는 유즈스테이트와 달리 어느 컴포넌트에서든 콘텍스트에 설정된 데이터에 대한 접근이 가능하여 글로벌 스테이트 관리에 용이합니다. HTML 삽입 미리보기할 수 없는 소스
리액트 훅 - 유즈 파람 / 유즈서치 파람(리액트 라우터 돔) 특정 경로에 세부경로를 추가하거나 경로를 통해 추가정보를 보내는 경우가 많은데요. 리액트 라이브러리 중 하나인 리액트 라우터 돔의 훅을 사용하여 URL에 파라미터 및 추가정보를 설정하고 사용하는 방법을 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 라우터 구성 리액트 라리브러리 - 리액트 라우터 돔 리액트는 자체적으로 가진 라우터기능을 없습니다. 리액트 라이브러리 중 하나인 리액트 라우터 돔을 사용하여 페이지 간에 경로를 구현해 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액 j..

728x90