태그 : 리액트 요약보기전체보기목록닫기

1 2

01.18 Code Splitting

React.js01.18. 리액트 코드 스플리팅싱글 페이지 애플리케이션의 단점은 페이지 로딩 속도가 지연될 수 있다는 것이다. 로딩 속도가 지연되는 이유는 자바스크립트 번들 파일에 모든 애플리케이션의 로직을 불러오므로 규모가 커지면서 용량도 커지기 때문이다. 하지만 이 문제는 코드 스플리팅(code splitting)을 하면 해결할 수 있다.코드 스플리...

01.17 React Router

01.16 리덕스 미들웨어와 외부데이터 연동

01.14 리덕스를 이용한 리액트 애플리케이션 생성

01.11 리액트 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components )

React.js01.11. 컴포넌트 CSS 적용 ( CSS Module, Sass, styled-components )CSS Module :     모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한하는 방법이다.Sass :     CSS 전처리기 중 하나로, 확장된...

01.10 리액트 함수형 컴포넌트

React.js01.10. 함수형 컴포넌트지금까지 컴포넌트는 class 문법을 사용하여 정의하였다. import React , { Component } from 'react';class NewComponent extends React.Component { render() { return ( <div&g...

01.9 React 컴포넌트 라이프사이클

React.js01.9. 컴포넌트의 라이프 사이클리액트 컴포넌트에는 라이트사이클이 존재한다. 페이지에 렌더링되기 전 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다.라이프사이클 메서드는 총 열가지로 Will 접두가사 붙은 메서드는 어떤 작업을 작동하기 전에 실행되고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.라이프사...

01.7 React ref (DOM에 이름 달기)

React.js01.7 React ref특정 DOM 요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 css에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. <!-- public/index.html 파일 --><!DOCTYPE html><html la...

01.8 리액트 컴포넌트 반복

React.js01.8. 컴포넌트 반복01.8.1. 자바스크립트 배열의 map() 함수자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback(curren...

01.6 React 이벤트 핸들링

React.js01.6. 리액트의 이벤트// 사용방법/* this.setState({ 수정할 필드 이름 : 값 ,수정할 또 다른 필드 이름 : 값}); */ render() { return ( <div> <p>안녕하세요. 제 이름은 {this.props.n...
1 2