본문 바로가기
728x90
반응형
SMALL

react12

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 - 생명주기 메서드 견고한 컴포넌트를 개발하기 위해서는 컴포넌트 API 전반, 생명주기 메서드에 대한 더 깊은 이해, 그리고 리액트의 렌더링 과정에 대한 이해가 필요하다. 생명주기 메서드란? - 클래스 기반 리액트 컴포넌트에 추가된 특별한 메서드로 컴포넌트의 생명주기 내의 특정 시점에 실행된다. - 동작을 시작하는 시점, 동작 중인 시점, 완료되는 시점을 표현하게 된다. 렌더링이 어플리케이션을 화면에 그려내는 작업이다. 생명주기 메서드를 이용하면 이 과정을 가로챌 수 있다. 생명주기 메서드의 종류 - Will 메서드: 어떤 작업이 실행되기 직전에 호출된다. - Did 메서드: 어떤 작업이 실행된 직후에 호출된다. 컴포넌트는 크게 4가지로 생명주기를 분류할 수 있다. - 초기화: - 마운팅: 리액트가 컴포넌트를 DOM에 삽입.. 2019. 3. 27.
React - 컴포넌트 간의 통신 리액트에서 한 컴포넌트가 다른 컴포넌트와 통신하기 위해서는 '속성' 을 전달해야 하며 속성을 전달할 때는 아래 두 가지 사항을 염두에 두어야 한다. 1) 상태나 속성에 대한 접근은 부모 컴포넌트에서 이루어진다.2) 필요한 데이터는 자식 컴포넌트에 전달한다. 부모 -> 자식 데이터 전달하는 예제 코드123456789101112131415161718192021222324252627282930import React from "react";import { render } from "react-dom";import PropTypes from "prop-types"; // simple 한 예제를 위해 상태가 없는 함수형 컴포넌트를 이용const UserProfile = props => { return ;};User.. 2019. 3. 15.
728x90
반응형
LIST