거니의 velog

4. styled-components * 컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식이다. 이 방식을 'CSS-in-JS'라고 부르는데, 이와 관련된 라이브러리는 정말 많다. 라이브러리의 종류는 다음 주소에서 확인할 수 있다. https://github.com/MicheleBertoli/css-in-js GitHub - MicheleBertoli/css-in-js: React: CSS in JS techniques comparison React: CSS in JS techniques comparison. Contribute to MicheleBertoli/css-in-js development by creating an account on GitHub. githu..

3. CSS Module * CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술이다. CSS Module을 사용하기 위해 구버전(v1)의 create-react-app에서는 웹 팩에서 css-loader 설정을 별도로 해 주어야 했지만, v2 버전 이상부터는 따로 설정할 필요 없이 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용된다. * CSSModule.module.css라는 파일을 src 디렉터리에 생성하여 다음과 같이 한 번 작성해 보자. /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마..

* 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 방식이란 없다. 회사마다 요구하는 스펙이 다르고, 개발자마다 각자 취향에 따라 선택하기 때문이다. 이 장에서는 어떠한 방식이 있는지 알아보고, 자주 사용하는 방식을 하나하나 사용해 보도록 하겠다. * 이 장에서 알아볼 스타일링 방식은 다음과 같다. - 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식이다. - Sass : 자주 사용되는 CSS 전처리기(pre-proccessor)중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있게 해 준다. - CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유..

4. useMemo * useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여 주는 함수형 컴포넌트를 작성해 보자. * src 디렉터리에 Average.js 파일을 생성하고 다음의 코드를 작성해 보자. import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중..."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () ..

* Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. * 이번 실습은 다음과 같은 흐름으로 진행된다. * 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해 주자. $ yarn create react-app hooks-tutorial 1. useState * useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 이전에도 이미 사용해 보았는데, 이번 장에서 다시 복습해 보자. 만약 함수형 컴포넌트에서 상태를..

3. 라이프사이클 메서드 사용하기 * 이전에 살펴본 라이프사이클 메서드를 직접 사용해 본다. 이번 실습은 다음 흐름으로 진행된다. (1) 예제 컴포넌트 생성 src 디렉터리에 LifeCycleSample.js라는 컴포넌트를 만들자. import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, }; myRef = null; // ref를 설정할 부분 constructor(props) { super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState)..

* 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. * 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. * 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 사용할 수 없는데, 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. Hooks에 대한 내용은 다음에 알아보도록 하자. 1. 라이프사이클 메서드의 이해 * 라이프사이클 메서..

4. 응용 * 지금까지 배운 개념을 응용하여 고정된 배열을 리렌더링하는 것이 아닌, 동적인 배열을 렌더링하는 것을 구현해 보자. 그리고 index 값을 key로 사용하면 리렌더링이 비효율적이라고 배웠는데, 이러한 상황에서 어떻게 고윳값을 만들 수 있는지도 알아보자. 이 절의 실습 흐름은 다음과 같다. (1) 초기 상태 설정하기 * IterationSample 컴포넌트에서 useState를 사용하여 상태를 설정해 보자. 세 가지 상태를 사용할 텐데 하나는 데이터 배열이고, 다른 하나는 텍스트를 입력할 수 있는 input의 상태이다. 그럼 마지막 하나는 무엇일까? 그것은 데이터 배열에서 새로운 항목을 추가할 때 사용할 고유 id를 위한 상태이다. * 배열을 설정할 때, 조금 전에는 단순히 문자열로 이루어진 ..

* 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있다. src 디렉터리에 IterationSample.js라는 파일을 작성해 다음 코드를 따라 한번 적어보자. import React from 'react'; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; * 코드에서 다음 형태가 반복되는 것을 볼 수 있다. ... * 지금은 li 태그 하나 뿐이라 그렇게 문제가 되지는 않을 것 같다. 하지만 코드가 좀 더 복잡하다면 어떨까? 코드양은 더더욱 늘어날 것이며, 파일 용량도 쓸데없이 증가할 것이다. 이는 낭비다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절..

2. ref 사용 * 이제 프로젝트에서 ref를 사용해 보자. ref를 사용하는 방법은 두 가지이다. (1) 콜백 함수를 통한 ref 설정 * ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달받는다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 준다. * 콜백 함수 사용 예시 {this.input=ref}} /> * 이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리킨다. ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. DOM 타입과 관계없이 this.superman = ref 처럼 마음대로 지정한..