프론트엔드/리액트 (12) 썸네일형 리스트형 리액트 - 스타일 라이브러리(부트스트랩) 리액트 애플리케이션에 스타일라이브러리를 추가하는 방법을 살펴보자 부트스트랩 아래 커맨드를 통해 부트스트랩 설치 npm i bootstrap index.js 파일에 경로추가 import 'bootstrap/dist/css/bootstrap.css'; 이상 참고 Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. R.. 리액트 훅 - 유즈레프 (돔요소 사용하기) 바닐라 자바스크립트의 경우 돔요소를 동적으로 활용하기 위해 쿼리셀렉터 등 해당 요소를 가져오는 다양한 방법을 제공합니다. 반면, 리액트는 컴포넌트 함수 안에서는 요소에 직접 코드를 작성하는 것이 가능하고 위처럼 다큐먼트객체를 활용하여 요소를 가져올 수 없기 때문에 순수 자바스크립트에서 사용되는 방식은 활용도가 낮습니다. 하지만, 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 방법의 비중이 큰 만큼, 이러한 기능이 존재한다면 알아 두는 것도 좋겠죠. 유즈 레프는 요소에 대한 레퍼런스를 만들고 해당 요소를 활용하는 훅으로 바닐라 자바스크립트에서 처럼 요소를 가져와서 작업하는 것을 가능하게 해 줍니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대.. 리액트 훅 - 유즈이펙트 (컴포넌트 상태변화 감지) 유즈이펙트는 리액트의 훅 중 하나로 컴포넌트 등의 상태가 변할 때 이를 감지할 수 있게 해 줍니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 사용방법 사용하고자 하는 컴포넌트에 유즈이펙트를 가져오고 아래처럼 설정합니다. 감지하고자 하는 대상이 있다면 아래처럼 꺽쇠를 추가하고 그 안에 추적대상을 추가하면 대상의 상태가 변화할 때마다 훅이 작동합니다 (이벤트와 비슷) 사용예시 콘텍스트 생성 유즈콘텍스트를 생성하고 아래와 같이 상태를 설정합니다 컴포넌트 생성 테스트를 위한 컴포넌트를 생성하고 유.. 리액트 훅 - 유즈콘텍스트 (글로벌 스테이트) 유즈콘텍스트는 리액트의 훅 중 하나로 유즈스테이트와 같이 애플리케이션의 상태를 관리하는 기능을 제공합니다. 다른 점은 연결된 컴포넌트 사이에서만 데이터를 주고받을 수 있는 유즈스테이트와 달리 어느 컴포넌트에서든 콘텍스트에 설정된 데이터에 대한 접근이 가능하여 글로벌 스테이트 관리에 용이합니다. HTML 삽입 미리보기할 수 없는 소스 리액트 훅 - 리디렉션 (리액트 라우터 돔) 리액트 라이브러리 중 하나인 리액트 라우터 돔의 훅을 사용하여 경로를 리디렉트하는 방법을 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 라우터 구성 리액트 라리브러리 - 리액트 라우터 돔 리액트는 자체적으로 가진 라우터기능을 없습니다. 리액트 라이브러리 중 하나인 리액트 라우터 돔을 사용하여 페이지 간에 경로를 구현해 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액 jin-co.tistory.com 설정된 경로에서 어바웃 페이지에 리디렉트를 설정해 보겠습니다 리디렉트 사용하기 1.. 리액트 훅 - 유즈 파람 / 유즈서치 파람(리액트 라우터 돔) 특정 경로에 세부경로를 추가하거나 경로를 통해 추가정보를 보내는 경우가 많은데요. 리액트 라이브러리 중 하나인 리액트 라우터 돔의 훅을 사용하여 URL에 파라미터 및 추가정보를 설정하고 사용하는 방법을 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 라우터 구성 리액트 라리브러리 - 리액트 라우터 돔 리액트는 자체적으로 가진 라우터기능을 없습니다. 리액트 라이브러리 중 하나인 리액트 라우터 돔을 사용하여 페이지 간에 경로를 구현해 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액 j.. 리액트 라리브러리 - 리액트 라우터 돔 리액트는 자체적으로 가진 라우터기능을 없습니다. 리액트 라이브러리 중 하나인 리액트 라우터 돔을 사용하여 페이지 간에 경로를 구현해 보겠습니다. HTML 삽입 미리보기할 수 없는 소스 리액트 라리브러리 - 프레이머 모션 리액트 라이브러리 중 하나인 프레이머 모션을 사용하여 컴포넌트가 자연스럽게 생성되거나 소멸되는 효과를 구현해 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 리스트 생성 리스트 표시하기 리스트를 동적으로 표면에 표시하는 방법을 보겠습니다. 리액트는 중괄호를 사용하여 템플릿 안에서 자바스크립트 코드를 작성할 수 있는 기능을 제공합니다. 해당 기능을 사용하여 동적리스 jin-co.tistory.com 삭제버튼 추가 리스트 아이템을 삭제하는 버튼을 아래와 같이 추가합니다 상태 관리 ▶ 유즈.. 이전 1 2 다음
