[리액트] component

📍 상태값을 공유하는 건, 하나의 컴포넌트로!

---

보통 리액트를 소개할 때(*리액트:JS기반 프레임워크) 왜 개발했는지를 먼저 이야기한다.

프론트엔드에서는 같은 코드여도, 여러번 작성돼 조금 고도화된(?) 페이지라면 굉장히 복잡해진다고 한다.

당사자가 아니면 가독성이 떨어질 뿐더러 코드량 자체도 증가해서 보기에도 사용하기에도 복잡하다고 한다.

그래서 나온 개념이 '재사용'이다. 편의성과 깔끔함을 갖춘 경제적인 코드가 가능하다는 것!

사실 처음 배울 때 뭐가 레고 같다는거고 뭘 재사용한다는건지 이해가 되지 않았다.

대체 ... 어느 부분을 어떻게?

*또는, 유투버 노마드코드 영상을 보는데 일부는 '라이브러리'성질을 갖고 있다고 한다.

---

그리고 지금 넷플릭스 클론 코딩하며 깨달은 재사용.!

Netflix Main View

✅ 처음부터 기능을 구현하기보다, View를 그리면 좋다.

프로젝트 폴더 구조를 잡으면서 나는 컴포넌트를 나눌 때 '하나의 상태값을 공유한다'는 개념이 없었다.

그래서 보이는 / 나눌 수 있는대로 일단 나누고 봤다.

1️⃣Trailer + 2️⃣TrailerTitle (title + synopsis + button)

그런데 API를 요청하고 데이터(상태)를 가져오려 하는 점에서 난관에 부딪혔다.

Trailer는 영화 제목, 이미지, 줄거리 데이터가 한 세트로 묶여서 동작해야 하는데 .. 이 코드를 어떻게?

 

생각해본 방법은 이렇다.

✔ 두 컴포넌트를 합치고 API를 쓴다.

✔ 두 컴포넌트를 합치고 API를 따로 쓴다.

✔ 각각 두고 API를 둘 다 쓴다.

✔ 각각 두고 API를 따로 쓰고 부른다.

 

결론은

✅ 두 컴포넌트를 합치고 API를 따로 쓰는게 좋다!

✅ 동일한 상태값을 가지는 건 하나의 컴포넌트로 두어야, API 연결이 좀더 효율적이다!

✅ 같은 데이터면, 페이지가 한 번 로딩될 때 불러오면 좋다.

이런 과정에서 사용할 수 있는 방법은 아주 다양하다고.

예를 들면 useContext, redux store .. 등!

 

메인 화면 뷰를 나눠 보면 다음과 같이 나눌 수 있다.

#️⃣Main (page) : 1️⃣Header / 2️⃣Trailer / 3️⃣Section (component)
2️⃣Trailer (component) : trailer / title / synopsis / button