728x90 반응형 SMALL IT/React14 React - 라우팅 #2 (예제 일부) 방문 기록을 가로채서 라우터가 브라우저의 주소 변경에 따라 적절한 컴포넌트를 렌더링하도록 해보자. 일반적인 태그 대신 Router 컴포넌트가 처리할 링크를 history 라이브러리를 이용해 생성해 보자. import createHistory from 'history/createBrowserHistory'; cons history = createHistory(); const navigatoe = to => history.push(to); export { history, navigate }; index.js 파일에 라우트를 설정하는 예제 코드 import React from 'react'; import { render } from 'react-dom'; import App from './pages/App';.. 2019. 5. 15. React - 라우팅 과거에는 동적 컨텐츠가 서버에 의해 생성됐다. 서버는 DB로부터 데이터를 조회한 후 이를 이용해 HTML 뷰를 생성해 브라우저로 전달했다. 요즘에는 더 많은 애플리케이션 로직이 JavaScript에 의해 관리되는 클라이언트에서 실행된다. 최초에는 서버가 HTML, JavaScript, CSS를 내려보내지만 그 다음부터는 클라이언트 리액트 앱이 모든 것을 관리한다. 그 시점부터는 사용자가 페이지를 직접 새로고치지 않는 한 서버는 오로지 JSON 데이터만을 전달한다. 리액트에서의 라우팅 - Router와 Route라는 두개의 컴포넌트를 개발한다. - Router 는 Route 컴포넌트들로 구성된다. - 각 Route는 /, /posts/123 등 하나의 URL 경로를 표현하며 해당 URL에 매핑한다. - 사.. 2019. 4. 19. React - 폼 이벤트 핸들러, controlled component, uncontrolled component 아래 4가지를 기억하자. 1. 컴포넌트는 상태와 속성을 이용해 데이터를 다룬다.2. 컴포넌트는 자바스크립트 클래스이기 때문에 이벤트에 반응하기 위한 생명주기 메서드들은 물론 다른 작업을 처리하기 위한 사용자 정의 클래스 메서드를 선언할 수 있다.3. 보통의 DOM 요소와 마찬가지로 리액트 컴포넌트 내에서도 클릭이나 입력값 변경 등과 같은 이벤트를 리스닝할 수 있다. 4. 부모 컴포넌트는 자식 컴포넌트의 속성으로 콜백 메서드를 전달해서 컴포넌트 간의 통신을 지원할 수 있다. 예제코드를 살펴보자. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364.. 2019. 3. 28. React - 에러처리 최근 버전의 리액트는 오류 경계(error boundaries)라는 개념을 도입했다. 만일 컴포넌트의 생성자, render 메서드 혹은 생명주기 메서드 내에서 처리되지 않은 예외가 발생하면 리액트는 컴포넌트와 그 자식 컴포넌트들을 DOM으로 부터 언마운트 한다. 이 방법은 에러를 해당 컴포넌트 내에 격리함으로써 앱의 나머지 부분들이 계속 원활히 동작하도록 할 수 있다는 장점이 있다.React.Component 클래스로부터 파생된 컴포넌트의 경우 componentDidCatch 메서드로 처리할 수 있다.이 메서드는 try-catch 구문의 동작과 유사하다. 예제 소스를 통해 살펴 보자. 1234567891011121314151617181920212223242526272829303132333435363738.. 2019. 3. 27. 이전 1 2 3 4 다음 728x90 반응형 LIST
