React는 UI를 컴포넌트 기반으로 만들어 재사용성을 높여주는 JS기반의 라이브러리 이다. 각각의 컴포넌트는 상태를 갖을 수 있으며 이 상태를 변경함으로써 UI를 업데이트 해준다.
STEP1. UI를 컴포넌트 계층구조로 나눈다.
컴포넌트는 어떤 역할을 갖는 재사용 가능한 UI 이다. 따라서 어떤 컴포넌트는 다른 컴포넌트 내부에서 사용될 수도 있다. 이때 컴포넌트를 포함하는 것을 부모 컴포넌트 라고 하고, 내부에서 사용되는 컴포넌트를 자식 컴포넌트 라고 한다.
아래와 같이 컴포넌트 내에서 ui를 컴포넌트로 나눌 수 있다.
STEP2. 우선 정적인 버전으로 만들어본다.
아직 익숙하지 않다면 바로 상태를 만들어 반응성있게 만드는 것 보다 우선 정적으로 props를 이용하여 만들어 보는 것이 좋다.
✅ props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법으로, 변경되는 데이터인 state와는 다르게 자식컴포넌트 내부에서 변경할 수 없다.
STEP3. 최소한이지만, 완전한 UI상태 표현을 찾는다.
UI를 interative하게 만들기 위해서는 state를 사용해야 한다.
✅ state란, 컴포넌트가 최소한으로 기억해야 하는 변경되는 데이터를 말한다.
어떤것을 state로 정의할 수 있을까?
- 시간이 지나도 데이터가 변경되지 않는다면? -> state가 아니다.
- 부모 컴포넌트에서 자식 컴포넌트에게 props 형태로 전달된다면? -> state가 아니다.
- 이미 존재하는 state, props 를 가공해서 얻어낼 수 있다면? -> state가 아니다.
STEP4. state가 어디에 위치해야 하는지를 결정한다.
어떤 state가 여러 컴포넌트 내에서 사용된다면 어떤 컴포넌트 내에 위치시킬 것인지를 결정해야 한다.
- React는 단방향 데이터 흐름( 부모 -> 자식 )을 가지므로 같은 state를 사용하는 컴포넌트들의 가장 근처에 있는 공통된 부모 컴포넌트가 있다면 그 부모컴포넌트에 state를 위치시킬 수 있다.
- 만약 위와같은 부모컴포넌트가 없다면, 해당 state를 위한 컴포넌트를 만들어서 state를 사용하는 컴포넌트들의 부모컴포넌트로 계층구조를 형성할 수 있다.
