덕분에 Goal 탭이 바뀔 때마다 todo 완료 여부 표시가 변경되는 문제를 해결할 수 있었다.
API 명세를 잘 보니 done 여부를 표시하는 필드, 전체 할 일의 progress를 표시하는 API 엔드포인트가 전부 있었다. 항상 API 명세를 사전에 잘 보고 개발에 들어가자.
Udemy <클린코드 자바스크립트>
함수 인자의 개수 몇 개가 적당한지에 대한 정답은 없다. 맥락에 잘 어울리면 된다.
그렇더라도, 인자가 너무 많아져서 고나리가 어려울 경우 객체를 인자로 넘기고 객체 구조 분해 할당을 활용하자.
객체 구조 분해 할당을 사용하더라도, 필수로 넣어줘야 하는 인자가 별도로 있다면 객체에서 빼주는 것도 좋다. (name, {brand, color, type}) 같은 형태이다.
default value를 넣어주면 함수를 안전하게 사용할 수 있다. 에러를 방지하기에 매우 좋다.
함수의 파라미터에 객체 구조 분해 할당을 사용하더라도 {value1 = 0, value2 = 0, value3 = 0} = {} 형식으로 defualt value를 넣어줄 수 있다.
인자가 몇 개 넘어올지 모르는 경우 arguments 객체를 사용할 수 있다. 화살표 함수를 제외한 함수들이 가지고 있는 argument 객체(유사 배열 객체)를 Array.from(arguments)로 배열로 바꾼 후 배열 메서드로 접근할 수 있다.
하지만, ES6 문법부터 Rest Parameter가 추가되었다. 파라미터로 ...를 지정해 주면 되고, 받는 인자들의 이름을 ...args 형태로 지정해 주면 된다.
arguments는 유사 배열 객체이지만, args는 배열이다. 별도의 처리 없이 배열 메서드를 바로 사용할 수 있다.
Rest Parameter는 다른 지정된 인자와 함께 사용할 수 있다. (value1, value2, ...args) 형태이다. Rest Parameter는 파라미터 뒤쪽에 와야 하고, 인자를 전달할 때에도 지정된 인자를 앞쪽에 넣어주어야 한다.
void는 함수의 반환이 없음을 뜻한다. void 함수를 함수 안에서 리턴할 경우 값을 받는 곳에서 헷갈릴 수 있다(e.g. return setState()).
사용하는 라이브러리의 메서드나 함수에 리턴이 있는지를 잘 파악하고 있는 것도 중요하다.
화살표 함수의 this는 상위 스코프의 this를 갖는다. 그래서, 메서드를 만들 때 화살표 함수를 무분별하게 사용하면 의도치 않게 this가 다르게 동작할 수 있으니 주의하자.
화살표 함수는 arguments 객체도 지원하지 않고, call, apply, bind 등도 지원하지 않으며, 생성자 함수로 사용할 수도 없다. 이러한 맥락을 파악하고 화살표 함수를 맥락에 맞게 사용해야 한다.
화살표 함수는 클래스의 인스턴스에서도 부모의 메서드에 접근할 수 없게 한다. 메서드로 함수를 사용할 땐 함수 축약형으로 만드는 게 이상적인 것 같다.
콜백 함수는 콜백 함수를 인자로 받는 함수에 제어권을 위임하게 된다. 사이드 이펙트가 발생할 수 있지만, 잘 활용하면 다양한 상황에서 굉장히 유용할 수 있다.
Udemy <한 입 크기로 잘라먹는 React>
input 태그를 DOM으로 접근해서 focus 메서드를 써주면 창이 하이라이트 된다.
useRef는 리액트 컴포넌트 안에서 사용하고 싶은 일반 변수를 생성하는 Hook이다. 단, 일반 변수랑 다른 점이 몇 가지 있다.
React 컴포넌트 내부에서도 일반 변수를 선언 및 할당할 수 있다. 하지만, 일반 변수는 컴포넌트가 재렌더링 될 때마다 값이 계속 초기화하기 때문에, 누적해서 값을 관리해야 하는 경우 문제가 생길 수 있다(e.g. 이벤트 핸들러 전체 호출 횟수 카운팅). 반면 useRef로 선언 및 할당한 변수는 한번 초기화되고 나면 리렌더링 돼도 값을 기억한다. 때문에, 컴포넌트의 변경 여부 관계없이 값을 누적 관리할 수 있다.
컴포넌트 외부에 일반 변수를 선언하고 할당한 다음 컴포넌트 내부에서 사용할 수도 있다. 이렇게 되면 리렌더링 여부와 관계 없이 값을 누적 관리할 수 있다. 하지만, 컴포넌트 외부에 선언된 변수는 컴포넌트가 재사용될 시 인스턴스들이 공유하는 변수가 된다. 따라서, 하나의 컴포넌트 인스턴스에서의 값 변화가 다른 컴포넌트 인스턴스에 영향을 미치게 되는 것이다. 하지만, useRef를 사용해 만든 변수는 인스턴스들 간에 서로 독립적인 값을 갖게 된다.
React는 과거에 클래스 컴포넌트가 메인이었다. 함수형 컴포넌트에는 제공되는 기능이 많지 않았다. 하지만, 함수 대비 클래스의 문법이 상대적으로 어렵다 보니 함수로 컴포넌트를 사용하려는 필요가 많아졌고, 해당 필요를 반영해서 함수형 컴포넌트에서도 클래스형 컴포넌트에서 주로 사용하던 다양한 기능들을 가져와서 사용할 수 있도록 제공됐다. 이렇게 제공된 것들이 'Hooks'다.
Hook은 함수형 컴포넌트-커스텀 훅에서만 사용 가능하며, 반드시 use라는 접두어가 붙는다. 그리고, 조건부로 호출될 수 없다(조건문-반복문 등에서 호출이 불가하다)는 특징도 있다.
함수 앞에 use를 붙이면 리액트는 훅으로 생각한다. 이를 활용해서 다양한 커스텀 훅을 만들 수 있다. 만약에 반복이 많이 되거나 긴 코드가 사용돼야 해서 로직을 분리할 경우 별도의 함수로 뗀 다음에 이름 앞에 use를 붙여서 커스텀 훅을 만들어 사용하자.
보통 훅은 별도 폴더(hooks)에 훅 이름의 파일을 만들어서 별도로 보관한다.
React는 단방향 데이터 바인딩 방식을 사용한다. 즉, 부모 컴포넌트에서 자식 컴포넌트로는 props로 데이터를 전달할 수 있지만, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 없다. 이런 당방향 데이터 처리 방식을 통해 데이터의 흐름을 보다 직관적으로 표현할 수 있다는 특징이 있다.
React의 생애 주기는 mount-update-unmount로 구성된다. mount는 컴포넌트가 처음 생성된(화면에 그려진) 시점을 얘기하고, update는 상태의 변화에 따라 컴포넌트가 리렌더링 되는 걸 얘기한다. unmount는 컴포넌트가 화면에서 사라지는 것을 의미한다.
useEffect는 컴포넌트 내부의 state 변경에 대한 사이드 이펙트를 관리한다. 쉽게 얘기해서, 컴포넌트 내부의 특정 state가 변경될 때, 해당 state와 함께 변경되어야 하는 로직을 관리해 준다. 사용법은 useEffect(콜백 함수, 의존성 배열) 형태이다.
먼저, 의존성 배열은 useEffect의 콜백 함수를 동작시키기 위해 상태 변경을 추적할 상태를 담은 배열이다. 아래와 같이 작성할 경우 count와 input 상태가 변경 시 useEffect의 첫 번째 인자로 넘어간 콜백 함수가 실행된다.
import { useState, useEffect } from 'react';
// 상태 정의
const [count, setCount] = useState(0);
const [input, setInput] = useState('');
// 상태 변경에 대한 사이드 이펙트 정의
useEffect( ...콜백 함수, [count, input])
이렇게 정의하면 count와 input의 상태가 각가 setCount와 setInput 함수로 변경될 시 useEffect의 첫 번째 인자로 전달된 콜백 함수가 실행된다. 예를 들어 useEffect(() => {console.log(count, input)}, [count, input])와 같이 정의해 두면, count와 input이 변할 때마다 변화된 두 값이 콘솔에 출력된다.
React의 setState 함수는 비동기로 처리된다. 이는 성능 최적화를 위함이며, 상태의 변경 때마다 DOM을 업데이트하는 게 아닌, 상태 변경 시 렌더링 큐에 태스크를 넣어두고 일정 배치 사이즈의 작업이 모이면 한 번에 DOM에 반영하는 것이다. 그렇기 때문에, setState의 값 변경 반영은 한 사이클의 DOM 변경 배치가 돈 이후가 되며, 만약에 변경과 즉시 어떠한 이벤트를 발생시키고 싶다면 useEffect를 사용해야 한다.
React 컴포넌트의 생명주기를 useEffect로 제어할 수 있다. mount는 빈 배열을 useEffect의 두 번째 인자로 전달해서 최초 실행 시점에만 useEffect의 콜백 함수가 실행되도록 하면 된다. update는 useEffect의 두 번째 인자로 아무 값도 전달하지 않아 모든 리렌더링 시 useEffect 첫 번째 인자인 콜백 함수가 실행되도록 하면 된다. 단, 최초 마운트 시에는 mount가 확인되어야 하기 때문에 useRef를 사용해 isMount와 같은 플래그 변수를 선언하여 최초 마운트 시에는 콜백이 실행되지 않도록 제어할 수 있다. 마지막으로 unmount는 useEffect의 return문에 다른 함수를 정의하여 useEffect 함수가 소멸하는 시점에 함수가 호출되도록 한다. 이를 Clean-up 함수, 또는 정리 함수라고 한다.