본문 바로가기

분류 전체보기72

[React] 학습내용 STEP.1 React 입문 및 활용 STEP. 01 자바스크립트의 역사 HTML&CSS 로 만들어진 정적인 페이지를 동적으로 동작할 수 있게 만들어줍니다. 보조적 기능을 수행하기 위한 용도로 사용되었습니다. NodeJS: 브라우저 외부에서 JS를 실행 할 수 있는 환경 package.json: 프로젝트의 설명서 (버젼, 사용중인 패키지 등을 알 수 있다.) - dependencies: 서비스에서 필요한 패키지들 - dev dependencies: 개발단계에서 필요한 패키지들 Git: 소스코드 버젼관리를 해준다. 협업과정에서의 피로도를 줄여준다. ES Lint: 코드의 규칙을 정한다. 프로젝트 코드의 균일화 (.eslintrc 라는 설정파일을 추가해주어야한다) Prettier: 코드 포맷 규칙을 정한다. ES Lin.. 2020. 5. 18.
[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.

티스토리툴바