[React] React 로 연락처 앱 만들기 - 1. 화면 설계 및 컴포넌트화

✨ 프로젝트 목표

서버 입출력 없이 React, Recoil, Typesciprt 를 적용한 앱을 만들어보며 각각에 익숙해지기.

처음부터 세가지 다 적용하지 않고, 하나씩 적용해보며 왜 이러한 라이브러리를 쓰는지, 얼마나 효율적인지, 어떤 구조로 작성할지를 생각해보자.

 

✨ 이번 페이지 목표

React 는 하나의 페이지를 작은 단위의 컴포넌트로 쪼개는 작업, 컴포넌트화가 중요하다.

어떤 요소를 어떻게 쪼갤지, 요소에 어떤 데이터를 바인딩 시킬지를 생각해보자.

 

✨  시작

1. 화면 설계

메인 화면은 왼쪽과 같다. (카톡을 좀 베꼈다 ㅎㅎ)

서치박스에 이름을 입력하면 해당하는 Friend 가 뜨고 Friend 를 누르면 오른쪽의 상세 정보가 뜨는 간단한 앱이다.

다른 버튼들은 그냥 장식이다. 

 

2. 이 화면을 어떻게 쪼갤까?

권장하는 방법은 생각할 수 있는 작은 단위까지 쪼개는 것이다.

React 는 어떤 변경사항이 생겼을 때 화면 전체를 갱신하는 것이 아닌, 컴포넌트 단위로 갱신한다.

또, 상위 컴포넌트가 바뀔 일이 생기면 안 바뀌어도 되는 하위 컴포넌트들까지 통째로 바뀐다...

예를 들어 A 컴포넌트 안에 A'1, A'2 컴포넌트를 전부 합쳐 넣으면 A 컴포넌트를 갱신할 때, 굳이 갱신 안 해도 되는 A'1, A'2 컴포넌트까지 갱신해버리는 것이다.

그러니 State로 엮이지 않은 관계라면 최대한 쪼개는 것이 바람직하다.

(결정적으로 최대한 쪼개는 게 속도가 더 빠르다고 한다...)

 

또 컴포넌트화의 포인트는 재활용이다.

작게 쪼갤 수록 해당 컴포넌트를 다시 쓰기 좋아진다.

이를 잘 생각해보고 화면을 컴포넌트화해보자.

 

3. State 를 어떤 컴포넌트에 넣을까?

권장하는 방법은 역시나 영향을 주는 컴포넌트에만 넣는 것이다 ㅎㅎ

React 의 컴포넌트들은 State 라 불리는, 화면에서 바뀌어야하는 요소 하나하나와 바인딩 된 어떠한 데이터를 가지고 있다.

State 값이 바뀌면 해당 State 를 가지고 있는 컴포넌트를 갱신한다.

문제는.. 아까도 언급했지만, 이 State 를 가지고 있는 컴포넌트의 하위 컴포넌트들까지 전부 갱신한다는 점이다.

귀찮다고 상위 컴포넌트에 전부 때려넣으면 하위 컴포넌트들에 불필요한 렌더링이 발생한다.

따라서 State가 A'2 컴포넌트에만 영향을 미친다면 A'2 컴포넌트 안에,

A'1, A'2  둘 다 영향을 미쳐야 한다면 A 컴포넌트에 넣는 게 베스트다.

 

4. 두 가지 사항을 잘 생각해서 컴포넌트화 + State 설계하기

나는 이렇게 설계했다.

Input Box 에는 search input 이 있을 것이다.

Phone List 에는 Data 들이 있고, search input 이 입력되면 일치하는 데이터들만 뜬다.

Profile 과 Detail Info 에는 메인화면에서 클릭한 Data 가 들어갈 것이다.

 

data 는 data list 안에 있고, search input 과 data list 가 대부분에 영향을 끼치니...

해당 State 들은 Main, Detail 상위의 App 에서 관리하면 된다.

물론 규모가 작은 앱이라 이렇다. 규모가 커진다면 생각할 게 많아질 것이다.

 

5. React 로 만들기~

아무튼 이제 이렇게 설계한 것을 react 로 만들면 된다 ㅎㅎ.... 이 내용은 다음 페이지에서 계속.