React/[책] 리액트를 다루는 기술

10장. 일정 관리 웹 애플리케이션 만들기

10.1 프로젝트 준비하기 1) 프로젝트 생성 및 필요한 라이브러리 설치 create-react-app을 사용하여 프로젝트를 생성하자. $ yarn create react-app todo-app 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하자. $ cd todo-app $ yarn add node-sass@4.14.1 classnames react-icons 2) Prettier 설정 .prettierrc { "singleQuote": true, "semi":true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 3) index.css 수정 index.css ..

16장. 리덕스 라이브러리 이해하기

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있고, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. (Context API를 통해서도 똑같은 작업 가능) 프로젝트 규모가 큰 경우 Context API보다는 리덕스를 사용하면 상태를 더욱 체계적으로 관리 할 수 있게 된다. 16.1 개념 미리 정리하기 1) 액션 상태에 어떤 변화가 필요하면 액션이 발생한다. 액션은 하나의 객체로 표현된다. 액션 객체는 type 필드를 반드시 가지고 있어야 한다. (이..

15장. Context API

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리액트 관련 라이브러리(리덕스, 리액트 라우터, styled-components) 등이 Context API를 기반으로 구현되어 있다. 15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리한다. G 컴포넌트는 전역 상태를 업데이트 시키고, F와 J 컴포넌트는 업데이트된 상태를 렌더링한다고 가정해 보자. 그렇다면 App 컴포넌트에서는 다음과 같이 상태와 업데이트 함수를 정의해야 한다. const [value, setVal..

9장. 컴포넌트 스타일링

일반 CSS: 컴포넌트를 스타일링 하는 가장 기본적인 방식 Sass: 자주 사용되는 CSS 전처리기 중 하나로, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있게 해준다. CSS Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 고유한 이름을 자동으로 생성해주는 옵션 styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로, 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 9.1 가장 흔한 방식, 일반 CSS 프로젝트는 일반 CSS 방식으로 만들어져 있다. CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것 → 중복되는 것을 방지하는 여러가지 방식 중..

8장. Hooks

Hooks 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 한다. 8.1 useState useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(va..

7장. 컴포넌트의 라이프사이클 메서드

7.1 라이프사이클 메서드의 이해 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리할 때, 또 불필요한 업데이트를 방지해야 할 때 컴포넌트의 라이프사이클 메서드를 사용한다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있고, 함수형 컴포넌트에서는 사용이 불가능하지만 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드의 종류 (총 9가지) Will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드: 어떤 작업을..

6장. 컴포넌트 반복

6.1 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 3가지다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 map 함수를 사용하여 배열 [1,2,3,4,5]의 각 요소를 제곱해서..

5장. ref.DOM에 이름 달기

일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 리액트 프로젝트에 사용하는 public/index.html 파일에도 id가 root인 div 요소가 존재한다. public/index.html ... src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다. src/index.js (...) ReactDOM.render(, document.getElementById('root')); ▶ 리액트 컴포넌트 안에서는 id를 사용하면 안 되나요? 리액트 컴포넌트 안에서도 id를 사용할 수는 있지만 사용을 권장하지 않는다. 예를 들어 같은 컴포넌트를 여러 번 사용해야 할 때 HTML에서 DOM의 id는 유일해야 하는데, 이런 상황에서 중복 id를 가진..

3장. 컴포넌트(2)

3.4 state state: 컴포넌트 내부에서 바뀔 수 있는 값, 변수 클래스형 컴포넌트가 지니고 있는 state 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state 일반 변수와 다르게 값이 변하면 렌더링이 일어난다. state 값을 변경시킬 때는 useState, setState 함수들을 사용한다. props: 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다 (수정은 부모 컴포넌트에서만 가능) [리액트가 업데이트 될 때] props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 1) 클래스형 컴포넌트의 state Counte..

4장. 이벤트 핸들링

4.1 리액트의 이벤트 시스템 이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 1) 이벤트 사용 시 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성한다. (onclick → onClick) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. // HTML Test function testHandler() { alert('Hello'); } // react { alert(this.state.message); }} >확인 3. DOM 요소에만 이벤트를 설정할 수 있다. → MyComponent를 클릭할 때 doSomething 함수를 실행하는 것이 아니라, 이름이 onClick인 props를 MyComponent에게 전달해 주는 것이다. 2)..