패스트캠퍼스 챌린지 45일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

수강 인증샷

---

패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

---

45일차

 45일차에는 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 19. 마무리 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 19. 마무리 강의에서는 Part 1. React 기초 Ch 03. React 공식 문서로 디테일잡기(고급) 챕터에서 그동안 배운 내용을 정리하는 시간을 가지고 추가로 React로 사고하기 개념에 대해 공부한다. 그동안 배운 내용은 기록했으니 이번 글에는 React로 사고하기 개념에 대해 정리하려 한다. React로 사고하기는 5단계에 걸쳐 이루어진다.

1단계: UI를 컴포넌트 계층 구조로 나누기

 첫 번째로 해야 할 일은 모든 컴포넌트와 주변에 박스를 그리고 그 각각에 이름을 붙이는 것이다. 어떤 것이 컴포넌트가 되어야 할지 아는 방법은 새로운 함수나 객체를 만들 때처럼 만들면 된다. 하나의 컴포넌트는 한 가지 일을 하는 게 이상적이라는 원칙을 지키면 된다.

2단계: React로 정적인 버전 만들기

 컴포넌트 계층구조를 만들고 난 뒤 앱을 실제로 구현해보는 시간에서 먼저 데이터 모델을 가지고 UI를 렌더링은 되지만 아무 동작도 없는 버전을 만들어본다. 이런 과정을 경험하는 이유는 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 상호작용을 만드는 것은 생각은 많이 해야 하지만 타이핑은 적게 필요로 하기 때문이다. 이때 정적 버전을 만들기 위해 state를 사용하면 안 된다. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용한다.

3단계: UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기

 UI를 상호작용하게 만들려면 기반 데이터 모델을 변경할 수 있는 방법이 있어야 한다. React는 이를 state를 통해 변경한다. 애플리케이션을 올바르게 만들기 위해 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 한다. 여기서 핵심은 중복배제 원칙이다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들을 필요에 따라 그때그때 계산되도록 만든다.4단계: State가 어디에 있어야 할지 찾기 React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따르기 때문에 어떤 컴포넌트가 state를 가져야 하는지 바로 결정하기 어려울 수 있다. 먼저, 애플리케이션이 가지는 각각의 state에 대해서1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.2. 공통 소유 컴포넌트를 찾는다(계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트 상위에 있는 하나의 컴포넌트).3. 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.4. state를 소유할 적절한 컴포넌트를 찾지 못했다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가한다.5단계: 역방향 데이터 흐름을 추가하기 React는 전통적인 양방향 데이터 바인딩과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와준다. 

 

---

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 

---

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC