태그 : 개발 요약보기전체보기목록닫기

1 2

01.15 리덕스 편하게 사용하는 방법

React.js01.15. 리덕스를 편하게 사용하는 방법리덕스를 사용하여 멀티 카운터를 만들면서 불편했던 점이 있다.액션을 만들 때마다 세 가지 파일 ( 액션 타입, 액션 생성 함수, 리듀서)을 수정해야한다는 점, 전개 연산자(...)와 slice 함수로 배열 내부의 아이템을 수정하는 데 가독성이 낮다는 점 등이다.이런 불편한 점을 해결하여 리덕스를 사...

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

01.13 React Redux(리덕스)

React.js01.13. React Redux리액트로 프로젝트에서는 최상위 컴포넌트에서 상태 관리 로직이 너무 많아져 코드가 길어지고 가독성이 떨어진다. 불필요한 리렌더링을 방지하기 위해서 하위 컴포넌트에서 shouldComponentUpdate를 구현하여 방지한다 하더라도 프로젝트가 복잡해질 경우 여러 컴포넌트를 거쳐 porps를 전달하는 ...

01.12 리액트 컴포넌트 리렌더링 최적화

React.js01.12. React Component Rerendering 최적화리액트에서는 Virtual DOM을 사용하여 필요한 DOM만 업데이트한다고 했는데, 왜 최적화가 필요할까?리액트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. 여기에서 불필요한 리렌더링이란 실제 웹 브라우저의 페이지에 나타난 DOM의 렌더링이 아니라 Virt...

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...

[Javascript] 간단한 주소록 만들기 - 3

이전 포스팅에서는 주소록에 담겨진 정보를 for문을 이용한 출력과새로운 데이터를 읽어와 array에 push를 하는 것까지 진행하였다.이번에는 수정과 삭제를 진행할 예정이다.수정과 삭제의 포인트는 event가 일어난 해당 행이 array에서 몇번째 데이터인지 알아야한다는 것이다.이전 새로운 데이터를 array에 push하는 포스팅에서는for문 ...

[Javascript] 간단한 주소록 만들기 - 2

이전 글에서는 주소록의 정보를 화면에 표시하는 방법을 배워보았다이번 글에서는 주소록에 새로운 정보를 입력하는 방법을 배워보자주소록의 정보는 아래와 같다 var phoneBook = { 'name' : '이름', 'age' : '나이', 'job' : '직업', ...
1 2