Promise의 기능과 필요한 이유
Promise는 자바스크립트 비동기 처리에 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다.
서버에다가 데이터 요청을 보내고 데이터를 받아오기도 전에 화면에 표시하려고 한다면 오류가 발생하겠지만, 이런 문제를 해결하기 위한 방법중 하나가 promise이다.
promise에는 3가지 상태가 있다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
순수함수란 무엇이고, 불변성과 side effect와의 관계는?
순수 함수란 동일한 인자가 전달되면 항상 동일한 결과를 반환하는 함수이다. 예측이 가능한 결과를 반환하기 때문에 다른 순수 함수들과 조합해서 사용하기가 용이하여 재사용성이 좋다. 또 하나의 기능에 충실하기 때문에 유지보수가 편리하다.
함수에서 값에 의한 호출 방식을 사용하는 자료형인지, 참조에 의한 호출 방식을 사용하는 자료형인지에 따라 인자가 변하는지 안변하는지에 대한 차이가 있기 때문에 불변성을 지키기 위해서는 이 점을 염두에 두고 코드를 작성하여야 한다.
- 불변성을 지키면 무분별한 상태의 변경을 막을 수 있다
- 불변성을 지키면 상태의 변경을 추적하기 쉽다
React의 state
state는 컴포넌트 내부에서 변하는 값, 즉 상태를 의미한다. 함수형 컴포넌트에서는 useState 라는 Hook을 통해 관리한다.
여러개의 자식으로부터 데이터를 받거나, 두개의 자식 컴포넌트들이 서로 통신하게 하기 위해서는 조상 컴포넌트에 state를 정의해야 한다.
React의 Props
props는 컴포넌트에서 컴포넌트로 데이터를 전달할 때 사용한다. 컴포넌트의 속성으로 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정이 가능하다.
- 문자열인 경우를 제외하고 모두 중괄호
{}로 값을 감싸야 한다. - props는 boolean, 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있고 공백 구분으로 여러개를 담는것도 가능하다.
- 읽기 전용으로, 컴포넌트 내부에서 props를 수정해서는 안된다. 모든 React는 props를 다룰 때 순수 함수처럼 동작해야 한다.
React의 key
배열을 렌더링하는 경우, 의도하지 않는 방식의 결과가 나타나거나 비효율적인 동작을 막기 위해 키가 사용된다. 하지만 예외로 리스트나 아이템이 고정되어 변경이 일어나지 않을 경우 인덱스를 사용할 수 있다. key의 값은 서로 다른 리스트의 요소라면 같아도 상관 없다.
useEffect의 dependency array
useEffect 를 사용할 때에는 첫번째 파라미터에 함수, 두번째 파라미터에는 배열을 넣는다.
- 만약 배열을 비우게 된다면, 컴포넌트가 처음 나타날 때만
useEffect에 등록한 함수가 호출된다. - 배열에 특정 값을 넣게 된다면 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. 또 언마운트 시에도 호출이 되고, 값이 바뀌기 전에도 호출이 된다.
- 배열을 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출이 된다.
- useEffect안에서 사용하는 상태나 props가 있다면 배열 안에 넣어주는게 규칙이다.
