프론트엔드 (108) 썸네일형 리스트형 리액트 훅 - 유즈콘텍스트 (글로벌 스테이트) 유즈콘텍스트는 리액트의 훅 중 하나로 유즈스테이트와 같이 애플리케이션의 상태를 관리하는 기능을 제공합니다. 다른 점은 연결된 컴포넌트 사이에서만 데이터를 주고받을 수 있는 유즈스테이트와 달리 어느 컴포넌트에서든 콘텍스트에 설정된 데이터에 대한 접근이 가능하여 글로벌 스테이트 관리에 용이합니다. HTML 삽입 미리보기할 수 없는 소스 공용 컴포넌트 - 리액티브 폼 인풋 컴포넌트의 재 상용성은 앵귤러나 리액트 등 프레임워크가 제공하는 장점 중 하나로 같은 코드를 중복작성할 필요성을 줄여줍니다. 오늘은 앵귤러에서 공용 인풋 컴포넌트를 만들어 보겠습니다. 구현하기 모듈추가 리액티브 폼즈 모듈을 모듈클래스에 추가합니다 컴포넌트 생성 공용으로 상용할 컴포넌트를 생성합니다 ng g c components/shared/input 생성한 컴포넌트 클래스 파일에 폼 컨트롤과 돔요소를 연결하는 인터페이스를 구현합니다 import { ControlValueAccessor } from '@angular/forms'; 구현된 메서드는 사용하지 않음으로 아래와 같이 정리 후 필요한 코드를 추가합니다. 인풋의 타입과 레이블은 인풋마다 다르므로 @Input을 통해 필드로 설정하여 변경 가능하도록 .. 리액트 훅 - 리디렉션 (리액트 라우터 돔) 리액트 라이브러리 중 하나인 리액트 라우터 돔의 훅을 사용하여 경로를 리디렉트하는 방법을 보겠습니다. 프로젝트 구성하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 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 삭제버튼 추가 리스트 아이템을 삭제하는 버튼을 아래와 같이 추가합니다 상태 관리 ▶ 유즈.. 리액트 훅 - 상태관리 (유즈 스테이트, 유즈 리듀서) 브라우저에 표시되는 정보는 일회성이고 해당 페이지에만 적용됩니다. 따라서, 페이지간에 정보를 주고받고 다른 페이지에서 수정된 정보를 표시하려면 공통된 상태를 관리하기 위해서는 서버 등을 이용하여야 하는데요. 리액트는 서버등을 사용하지 않고 상태를 관리하게 해 주는 다양한 훅들을 제공하는 데 어떻게 사용하는지 볼까요? HTML 삽입 미리보기할 수 없는 소스 리스트 표시하기 리스트를 동적으로 표면에 표시하는 방법을 보겠습니다. 리액트는 중괄호를 사용하여 템플릿 안에서 자바스크립트 코드를 작성할 수 있는 기능을 제공합니다. 해당 기능을 사용하여 동적리스트 요소를 만들어 보겠습니다 구현하기 리액트 앱 생성 리액트? 리액트는 자바스크립트 라이브러리로 앵귤러, 뷰와 함께 3대 자바스크립트 프레임워크 중 하나입니다. 앵귤러와 마찬가지로 컴포넌트 단위로 UI를 구성하는 방식을 사용하지만 앵귤러와 달리 jin-co.tistory.com 테스트를 위해 객체를 가진 배열생성 var items = [ {id: 1, name: 'pencil'}, {id: 2, name: 'eraser'}, {id: 3, name: 'brush'}, ] 요소 안에 중복으로 표시하고자 하는 요소를 중괄호로 감싸고.. 이전 1 2 3 4 5 ··· 14 다음
