React State

키워드

- React state란?
- DRY 원칙
- SSOT(Single Source of Truth)
- useState
- 1급 객체(first-class object)란?
- Lifting State Up

Thinking in React

Thinking in React

• Step 3: 최소한이지만 UI 상태의 완전한 표현 찾기

• Step 4: 상태의 식별 위치 확인

• Step 5: 역 데이터 흐름 추가

React State

"변경"을 다루기 위한 요소

"Re-rendering"이란 주제에서 다뤄진다.

컴포넌트의 state가 변경되면, 해당 컴포넌트와 하위 컴포넌트를 다시 렌더링하게 된다.

일관성과 효율성을 위해 DRY원칙을 따르는 SSOT를 만든다.

DRY(Don't Repeat Yourself)

중복 배제(Don't Repeat Yourself)는 모든 형태의 정보 중복을 지양하는 원리이다.

SSOT(Single Source of Truth)

단일 진실 공급원(Single Source of Truth)은 정보 모형과 관련된 모든 데이터 요소를 한 곳에서만 제어 또는 편집하도록 조직 하는 관례를 말한다.

State의 조건

1. 변경돼야 함. 변경되지 않는 건 state로 다룰 가치가 없다.

2. 부모 컴포넌트가 props를 통해 전달한다면 state가 아님.

3. 다른 state나 props를 이용해 계산 가능하다면 state가 아님.

다루는 상태가 너무 많으면 복잡해지며, TypeScript를 잘 쓰면 직접 관리하는 상태의 수를 줄여줄 수 있다.

(React만 쓴다면) 해당 상태에 의존적인 컴포넌트를 모두 포함하는 컴포넌트가 상태를 소유해야 함.

useEffect 의 잘못된 사용 예시

// 잘못된 코드
const [fullName, setFullName] = useState('');
useEffect( () => {
 setFullName(firstName + '' + lastName)
}, [firstName, lastName])

// 올바른 코드
const [firstName, setFirstName] = useState('Taylor');
const [lastName, setlastName] = useState('Swift');
const fullName = firstName + '' + lastName

• “Lifting State Up”

• Sharing State Between Components

Lifting State Up(State 끌어올리기)

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때, 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다.

Inverse Data Flow

하위 컴포넌트의 props로 함수를 전달. 흔히 콜백함수라고 부름.

TypeScript(정확히는 JavaScript)는 함수가 일급(first-class) 객체다. 즉, 어떤 함수를 다른 함수에 인자로 넘겨주거나, 어떤 함수를 리턴값으로 사용할 수 있다. 익명함수, 클로저 등과 함꼐 사용하면 시너지가 큼.

일급 함수

함수가 변수처럼 다뤄지는 경우를 말한다.

• 함수를 특정 변수에 할당할 수 있다.

• 함수 호출의 인자로 함수를 넘길 수 있다.

• 함수를 반환할 수 있다.