본문 바로가기

분류 전체보기75

[React] 컴포넌트의 라이프사이클 (수명주기) 라이프사이클 모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. - 수명주기 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때까지 끝납니다. 컴포넌트의 라이프사이클 메서드를 사용합니다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. (함수형 컴포넌트에서는 사용할 수 없습니다. - Hooks) 라이프사이클 메서드의 이해 1. 라이프사이클 메서드의 종류 (9가지) Will 메서드 - 어떤 작업을 작동하기 전에 실행되는 메서드 Did 메서드 - 어떤 작업을 작동한 후에 실행되는 메서드 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있습니다. 라이프사이클 (3가지) 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 마운트 DOM이 생성되고 웹 브라우저.. 2020. 5. 14.
[React] 컴포넌트 반복 Map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후, 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성하는 함수로 파라미터 3가지 입니다. - currentValue: 현재 처리하고 있는 요소 - index: 현재 처리하고 있는 요소의 index 값 - array: 현재 처리하고 있는 원본 배열 thisArg(선택사항): callback함수 내부에서 사용할 this 레퍼런스 map 함수: 기존 배열로 새로운 배열을 만드는 역할 let number = [1, 2.. 2020. 5. 14.
[React] Component Component 구성 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지 컴포넌트로 구성되어 있습니다. 클래스형 컴포넌트 Component를 선언하는 방식 2가지 : 함수형 컴포넌트, 클래스형 컴포넌트 함수형 컴포넌트 클래스형 컴포넌트보다 선언하기가 훨씬 편합니다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. 빌드한 후 배포할 때도 결과물의 파일 크기가 더 작습니다. (함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면에서 사실상 별 차이가 없다.) 단점: state의 라이프사이클 API의 사용이 불가능하다는 점. (리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.) // 함수형 컴포넌트 import React fro.. 2020. 5. 13.
[React] 리액트란 리액트란? 프론트엔드 라이브러리, 프레임워크 단순히 웹 페이지가 아니라 웹 애플리케이션입니다. 브라우저 상으로도 자연스러운 흐름으로 매우 많은 것을 할 수 있습니다. 어떤 인터페이스를 동적으로 움직이게 하려면 수많은 상태를 관리해주어야 합니다. Counter 0 + 버튼을 눌러서 숫자 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스 프로젝트가 규모가 커지고, 정말 다양한 유저 인터페이스와 인터렉션을 제공한다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는 건 힘들어집니다. 컨벤션을 가지고, 여러 규칙을 세워서 진행한다면, 불가능한 일은 아니지만 번거롭다는 단점이 생깁니다. 웹 개발 시, DOM 관리와 상태 값 업데이트 관리를 최소화하고, 오직 기능 개발, 사용자 인터페이스를 구현하는 것에.. 2020. 5. 12.

티스토리툴바