본문 바로가기
8. React todo-app 1 1. 프로젝트 생성 및 필요한 라이브러리 설치 yarn create react-app todo-app cd todo-app yarn add styled-components react-icons 2. Prettier 설정 // 프로젝트의 최상위 디렉토리에 .prettierrc 파일 생성 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 3. index.css, App.js 초기화 /*index.css 초기화*/ body { margin: 0; padding: 0; background-color: rgba(128,128,128,0.3); } //App.js .. 2020. 10. 25.
7. Component Styling Sass styled-components Sass css 전처리기 복잡한 작업을 쉽게 해주고, 스타일 코드의 재활용성, 가독성을 높여 유지보수의 용이함 확보 https://heropy.blog/2018/01/31/sass/ styled-components import React from 'react'; import styled, { css } from 'styled-components'; //tagged template literal 문법이용한 styled component const Box = styled.div` background: ${props => props.color || 'blue'}; padding: 1 rem; display: flex; `; const Button = styled.but.. 2020. 10. 25.
6. React Hooks Hooks react v16.8에 새로 도입된 기능 함수형 컴포넌트에서는 할 수 없었던 클래스컴포넌트만의 다양한 작업을 함수형 컴포넌트에서도 가능하게 해주는 함수 오직 React 함수 내에서 hook을 호출해야 한다 : hook을 일반적인 JS함수 내에서 호출하면 안된다. 항상 React 함수의 최상위에서 hook을 호출 : 조건문, 반복문등에서 호출하면 안된다 대표적인 hooks useState useEffect useReducer useMemo useCallback custom Hooks useState import React, {useState, useEffect } from 'react'; const Counter = () => { const [number, setNumber] = useState.. 2020. 10. 25.
5. React Component Lifecycle React Component Lifecycle 리액트 컴포넌트 라이프사이클 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 페이지에서 사라질때 까지를 의미 라이프 사이클은 크게 3가지 카테고리로 나뉨 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는것 업데이트 : 리렌더링 언마운트 : 컴포넌트를 DOM에서 제거하는 것 라이프사이클의 특정 시기에 특정 작업을 처리하기 위해 "라이프사이클메서드" 사용 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능 마운트 마운트할 때 호출하는 메서드 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 호출 메서드 constructor( ) : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps( ) .. 2020. 10. 25.
4. Component 반복 자바스크립트 map ( ) 함수 리액트 프로젝트에서 반복적인 컴포넌트를 렌더링할 때 "map 함수"를 사용 map( ) 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성 문법 : array.map( callback( currentValue, index, array), [thisArg] ) callback 함수 : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg (선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 key : 컴포넌트 배열을 렌더링했을 때 어떤 원소에 .. 2020. 10. 25.
3. React Event Handling Event 웹 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 합니다. 예를들어 DOM 요소를 클릭하면 onClick 이벤트를 정의해 상호작용을 하게 됩니다. 리액트 이벤트 시스템 주의사항 이벤트 이름은 카멜 표기법으로 작성 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 DOM 요소에만 이벤트 설정할 수 있다 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 단지 props를 전달해 줄 뿐. 클래스 컴포넌트의 이벤트 핸들링 - state와 메서드 활용 1. 이벤트 발생시 생성되는 e객체를 이용한 이벤트 핸들링 import React, { Component } from 'react'; class EventPractice extends Component .. 2020. 10. 25.

티스토리툴바