💪 React. Component Reuse

📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠAug 30 ~ Sep 3, 2021

현재 상태

https://www.notion.so/wecode/React-f808df453fec45e494bd39d888d73530

<component와 component 재사용>

• component는 props 값에 따라 서로 다르 UI를 보여줄 수 있어 (조건부 렌더링)
• component는 구조를 효율적으로 설계해야 해
• props, children의 사용법에 대해 이해해야 해

공식 문서 필독 링크

component를 쌓아서 홈페이지 하나를 만드는 거야. 그래서 설계가 중요해.
파일 중첩 너무 만이 하지 말고 최대 4개 미만으로 해. 상대 경로를 타고 들어오기 때문에 그렇지 파일이 너무 많이 중첩되면 react에서 처리하는게 복잡해져.

• 컴포넌트 추출 : 컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워하지 말기
  - UI 일부가 여러 번 사용되거나 (button, pannel, avatar)
  • UI 재사용되지 않더라도 일부가 자체적으로 복잡한 경우 (app, feedstory, comment) ex Nav bar

(참고)
디자인시스템이 구축되어 있는 회사 ex 토스, 배달의민족, google materials
material-ui.com > component
(/)

왓챠, 라인프렌즈 git clone 받아서 컴포넌트랑 기능 살펴보고 내 프로젝트에 적용하기
링크 account 부분

그렇다고 전부 다 component로 만드는 게 아니라 props로 달리 표시해 주고 싶은 값들을 component에 넘겨서 하나의 component로 여러 가지 형태를 사용할 수 있어

// before -> 두 개의 내용을 표현하기 위한 두 개의 컴포넌트
isMyID ? <ProfileMyID /> : <ProfileOtherID />

// after -> 두 개의 내용을 표현하기 위한 하나의 컴포넌트
const MY_ID = 'mine'
const OTHER_ID = 'others'

isMyID ? <Profile userID={MY_ID} /> : <Profile userID={OTHER_ID} />```

컴포넌트 미리 빼놔라잉
컴포넌트는 js 파일을 css 파일까지 같이 쓴다잉

this.props.children
https://ko.reactjs.org/docs/glossary.html#propschildren

여러 개가 들어가고, 그 안쪽에 각각 요소들이 들어있는 건? 배열이잖아.
그래서 우리가 map 돌리면 return할 때 배열로 반환돼.
태그도 이렇게 배열로 표현할 수 있고, 하위 태그를 children으로 표현할 수 있어.
component가 감싸고 있고, 안에 구멍이 뿅뿅 뚫려있어서 거기에 children을 넣어서 쓴다고 생각해.