React에서 useEffect 연결을 사용하여 어셈블리 라이프 사이클 교체
React 연결은 React에서의 개발 방식을 철저히 바꾸고 우리가 가장 관심을 가지는 문제를 해결하고 있습니다.useEffect 연결을 사용하면 중복된 구성 요소 생명주기 코드를 교체할 수 있습니다. useEffect는'사용 부작용'의 줄임말이다.API를 사용하는 것처럼 애플리케이션이 외부 세계와 반응할 때 효과가 나타납니다.그것은 우리가 변화가 있는지에 따라 함수를 운행할 수 있도록 허용...
React2022-06 last update
36 minutes reading
기본으로 돌아가기: React의 도구는 무엇입니까? 어떻게 작동합니까?
자바스크립트의 매개 변수와 함수의 작업 방식에 익숙해지면 도구를 이해하기 쉽습니다!요컨대, props React에서 데이터를 부모 구성 요소에서 하위 구성 요소로 전달하는 데 사용되며, 이것은 구성 요소 통신의 주요 메커니즘이다.따라서 본질적으로 도구는 React 구성 요소 모드의 작업을 허용하는 주요 부분이다. 대다수의 위대한 발명처럼 간단한 핵심 이념이 모든 것을 한데 연결시킨다.Reac...
React2022-06 last update
7 minutes reading
React-Redux를 사용하여 React에 Redux 연결
프로그램 구성 요소를 제공하여 전체 응용 프로그램에서 저희 상점에 접근할 수 있습니다. 연결 함수는 용기 구성 요소를 만들 수 있고 상점과 스케줄링 작업에서 상태를 읽을 수 있습니다. React-Redux의 공급자 구성 요소를 사용하여 주 응용 프로그램 구성 요소를 포장하고 응용 프로그램의 Redux 저장소가 React 구성 요소 트리 아래의 모든 용기 구성 요소 (연결 구성 요소) 에서 접...
React2022-06 last update
40 minutes reading
Jest를 사용하여 React 구성 요소에 대한 스냅샷 테스트 작성 방법
React 구성 요소를 위한 스냅샷 테스트를 작성할 때 코드를 작업 상태로 만들어야 합니다.그런 다음 특정 데이터를 지정한 상태에서 출력할 스냅샷을 생성합니다.스냅샷 테스트는 구성 요소와 함께 제출됩니다.Jest는 테스트 프레임워크로 스냅샷과 테스트의 렌더링 출력을 비교합니다. 만약 테스트가 실패한다면, 이것은 두 가지 일을 의미할 수 있다.만약 테스트 결과가 의외라면, 구성 요소의 문제를 ...
DevelopmentReactJavaScript2022-06 last update
29 minutes reading
React Native에서 라우팅 및 React Navigation 사용 방법
이 강좌의 마지막에 당신은 기본적인 소셜네트워크서비스를 가질 것입니다.사용자의 연결 수를 표시하고 다른 친구와 연결하는 방법을 제공합니다.이 예시 응용 프로그램을 사용하여 react-navigation 내비게이션 모바일 응용 프로그램 화면을 어떻게 사용하는지 탐색할 것입니다. 응용 프로그램에는 App이 더 필요합니다.FriendsScreen에서 새 친구를 추가할 수 있습니다.FriendsSc...
React2022-06 last update
74 minutes reading
React 애플리케이션에 Google Maps API 통합 방법
이 강좌는 Google Maps API를 React 구성 요소에 통합하여 웹 사이트에 지도를 표시할 수 있도록 합니다. 참고 디렉토리에서 불필요한 파일 삭제 및 가져오기 create-react-app 를 선택할 수 있습니다.필요 없음 src, logo.svg, App.css.또한 오류가 발생하지 않도록 index.css 중 index.css 의 import 도 삭제해야 합니다. 다음은 goo...
ReactJavaScript2022-06 last update
56 minutes reading
함수 GitHubUsers () 의 React 항목에 React 연결을 적용하는 방법... 상태 변수 이름은 "users"가 아니라 "users"여야 합니까?나한텐 그런 것 같아.함수 GitHubUsers() {const[사용자, 사용자 설정]=사용 상태([]);
본고에서 탐색 은 React 최신 버전 16.8의 새로운 기능입니다.React 연결은 기능이며 상태와 생명주기 방법의 모듈화 대체품이다.React 연결을 사용하면 클래스 구성 요소가 아닌 기능 기반 구성 요소를 구축할 수 있습니다. React 연결을 사용하면 더 적은 코드 줄을 사용하여 상태와 생명주기 방법을 ScoreCounter 파일의 기능 구성 요소로 압축할 수 있습니다.index.js...
JavaScriptReact2022-06 last update
28 minutes reading
React 및 React 연결에서 컨텍스트 API 사용 방법
React 연결은 기능 구성 요소에서 작성된 상태와 생명주기 방법의 모듈화 교체로 사용할 수 있는 기능입니다.useContext() 방법은 구성 요소 트리를 통해 내부 전역 상태를 뚫어 데이터를 전달하는 대체 방법이다. 컨텍스트 API를 확인하기 위해 React 응용 프로그램에서 컨텍스트에 액세스하는 방법을 살펴보겠습니다.React는 데이터를 도구로 전달할 수 있도록 createContext...
React2022-06 last update
10 minutes reading
React Select를 사용하여 검색 가능한 비동기식 드롭다운 목록을 만드는 방법
HTML은 <select> 요소를 제공하여 최종 사용자가 <option> s의 드롭다운 메뉴에서 선택할 수 있도록 합니다. 은 고도로 설정할 수 있는 React 선택 메뉴 라이브러리로 동적 검색과 선별 기능이 있습니다.또한 비동기식 옵션 로드, 액세스 가능성, 빠른 렌더링 시간도 지원합니다. 이 강좌에서 프로젝트에 React Select를 추가합니다.다중 선택, 사용자 생성 가능 옵션, 비동...
React2022-06 last update
19 minutes reading
React Router v4를 사용하여 기준 라우팅 및 응답 라우팅을 설정하는 방법
다음은 이 프레젠테이션을 구축하는 데 필요한 모듈을 설치합니다.이 모듈은 react-router-dom 및 react-media 입니다.다음 명령을 실행하여 설치할 수 있습니다. 이제 다음 명령을 실행하여 응용 프로그램을 시작할 수 있습니다. 다음 디렉토리에 UsersCard.js 파일을 만듭니다. 다음 디렉토리에 UsersCard.css 파일을 만듭니다. 응용 프로그램에 사용자를 표시하려면...
ReactJavaScript2022-06 last update
61 minutes reading
React 컨텍스트를 사용하여 사용자 상태를 관리하는 방법
상기 예시에서 Avatar 구성 요소만 실제 user 도구를 사용합니다.그러나 그의 모든 조상 부품(부모, 조부모 등)은 user을 받아들여 전달한다.이것은 만약에 Avatar 구성 요소가 장래에 다른 도구를 필요로 한다면 모든 조상 구성 요소가 그것을 수신하고 전달해야 한다는 것을 의미한다. React.createContext 방법은 Context 대상을 되돌려줍니다.이 Context 대상...
React2022-06 last update
25 minutes reading
Storybook을 사용하여 JS 구성 요소 구축 방법
이는 개발자가 취약한 데이터, 미완성 API 또는 비즈니스 논리를 걱정하지 않고 응용 프로그램과 분리된 환경에서 UI 구성 요소를 만들 수 있다는 것을 의미한다.이것은 당신으로 하여금 안심하고 부품을 선적할 수 있게 합니다. 구성 요소 라이브러리: 스토리북의 작업 방식에 따라 응용 프로그램의 모든 구성 요소를 한 위치에 놓는 과정을 이용하여 구성 요소 라이브러리를 유지하고 구성 요소의 모든 ...
ReactJavaScript2022-06 last update
5 minutes reading
Create React App에서 Typescript 사용 방법
React 응용 프로그램을 구축하기 위한 기본 패키지와 설정을 제공합니다.버전 2.0은 정부 의 지원을 도입했다.이렇게 하면 JavaScript 사용자가 React 프런트엔드 프레임워크에서 TypeScript 규칙을 사용하여 작성할 수 있습니다.TypeScript는 더욱 안전한 문서화 코드를 작성하고 개발자가 버그를 더 빨리 포획할 수 있도록 도와주는 강력한 도구입니다. 이 문서에서는 Cre...
DevelopmentTypeScriptReactJavaScript2022-06 last update
17 minutes reading
Ubuntu 20.04에서 Nginx 배포 React 응용 프로그램을 사용하는 방법
기본 구축 도구를 사용하여 응용 프로그램을 서버에 신속하게 배치할 수 있습니다.build 스크립트는 모든 코드, 이미지, 스타일, 파일을 포함하는 디렉터리로 프로그램을 컴파일합니다.단일 위치의 자산을 사용하면 웹 서버에 최소한의 설정을 배치할 수 있습니다. 이 강좌에서는 로컬 컴퓨터에서 실행 의 서버에 React 응용 프로그램을 배치합니다.Create-React-App를 사용하여 응용 프로그...
ReactJavaScriptDeploymentUbuntu2022-06 last update
15 minutes reading
React 헬멧을 사용하여 제목과 메타데이터를 변경하는 방법
서버 쪽이 서로 결합될 때, 검색 엔진과 소셜 미디어 파충류에 의해 읽힐 탭 meta 개를 설정할 수 있습니다.이로써 서버 측의 렌더링과 React-helm은 응용 프로그램을 만드는 강력한 조합이 되었다. React 프로젝트에서 구성 요소를 가져오고 사용하는 데 익숙합니다. 이제 응용 프로그램에서 React Healmet을 사용할 수 있습니다. React 헬멧에 추가된 title 및 meta...
React2022-06 last update
34 minutes reading